/* Generated by Cassiopeia Themer — do not edit by hand. */
/* Edit at Components → Cassiopeia Themer → Brand. */
:root {
    --cassiopeia-color-primary: #1f6f6a;
    --cassiopeia-color-link: #1f6f6a;
    --cassiopeia-color-hover: #1c645f;
    --primary: #1f6f6a;
    --primary-rgb: 31, 111, 106;
    --bs-primary: #1f6f6a;
    --bs-primary-rgb: 31, 111, 106;
    --link-color: #1f6f6a;
    --link-color-rgb: 31, 111, 106;
    --bs-link-color: #1f6f6a;
    --bs-link-color-rgb: 31, 111, 106;
    --link-hover-color: #1a5e5a;
    --link-hover-color-rgb: 26, 94, 90;
    --bs-link-hover-color: #1a5e5a;
    --bs-link-hover-color-rgb: 26, 94, 90;
    --cassiopeia-color-secondary: #b23d22;
    --secondary: #b23d22;
    --secondary-rgb: 178, 61, 34;
    --bs-secondary: #b23d22;
    --bs-secondary-rgb: 178, 61, 34;
    --cassiopeia-banner-bg: #7a5a00;
    --accent: #7a5a00;
    --accent-rgb: 122, 90, 0;
    --bs-accent: #7a5a00;
    --bs-accent-rgb: 122, 90, 0;
    --code-color: #7a5a00;
    --code-color-rgb: 122, 90, 0;
    --bs-code-color: #7a5a00;
    --bs-code-color-rgb: 122, 90, 0;
    --kbd-bg: #333027;
    --bs-kbd-bg: #333027;
    --kbd-color: #f6f0e2;
    --bs-kbd-color: #f6f0e2;
    --cassiopeia-color-page-bg: #f6efdc;
    --body-bg: #f6efdc;
    --body-bg-rgb: 246, 239, 220;
    --bs-body-bg: #f6efdc;
    --bs-body-bg-rgb: 246, 239, 220;
    --cassiopeia-color-text: #2b2a24;
    --body-color: #2b2a24;
    --body-color-rgb: 43, 42, 36;
    --bs-body-color: #2b2a24;
    --bs-body-color-rgb: 43, 42, 36;
    --secondary-color: #5b584c;
    --secondary-color-rgb: 91, 88, 76;
    --bs-secondary-color: #5b584c;
    --bs-secondary-color-rgb: 91, 88, 76;
    --cassiopeia-color-headings: #2b2a24;
    --cassiopeia-color-light: #eae2cb;
    --light: #eae2cb;
    --light-rgb: 234, 226, 203;
    --bs-light: #eae2cb;
    --bs-light-rgb: 234, 226, 203;
    --cassiopeia-color-dark: #333027;
    --dark: #333027;
    --dark-rgb: 51, 48, 39;
    --bs-dark: #333027;
    --bs-dark-rgb: 51, 48, 39;
    --secondary-bg: #f1e8d1;
    --secondary-bg-rgb: 241, 232, 209;
    --bs-secondary-bg: #f1e8d1;
    --bs-secondary-bg-rgb: 241, 232, 209;
    --tertiary-bg: #fbf4e2;
    --tertiary-bg-rgb: 251, 244, 226;
    --bs-tertiary-bg: #fbf4e2;
    --bs-tertiary-bg-rgb: 251, 244, 226;
    --border-color: #8a846e;
    --border-color-rgb: 138, 132, 110;
    --bs-border-color: #8a846e;
    --bs-border-color-rgb: 138, 132, 110;
    --border-color-translucent: #e6dbbf;
    --bs-border-color-translucent: #e6dbbf;
    --primary-bg-subtle: #8fd1c8;
    --primary-bg-subtle-rgb: 143, 209, 200;
    --bs-primary-bg-subtle: #8fd1c8;
    --bs-primary-bg-subtle-rgb: 143, 209, 200;
    --primary-text-emphasis: #1f4f4b;
    --bs-primary-text-emphasis: #1f4f4b;
    --secondary-bg-subtle: #fd7451;
    --secondary-bg-subtle-rgb: 253, 116, 81;
    --bs-secondary-bg-subtle: #fd7451;
    --bs-secondary-bg-subtle-rgb: 253, 116, 81;
    --secondary-text-emphasis: #6a1400;
    --bs-secondary-text-emphasis: #6a1400;
    --danger-bg-subtle: #ffdad6;
    --danger-bg-subtle-rgb: 255, 218, 214;
    --bs-danger-bg-subtle: #ffdad6;
    --bs-danger-bg-subtle-rgb: 255, 218, 214;
    --danger-text-emphasis: #93000a;
    --bs-danger-text-emphasis: #93000a;
    --cassiopeia-color-success: #3d6b34;
    --success: #3d6b34;
    --success-rgb: 61, 107, 52;
    --bs-success: #3d6b34;
    --bs-success-rgb: 61, 107, 52;
    --cassiopeia-color-info: #1f4f4b;
    --info: #1f4f4b;
    --info-rgb: 31, 79, 75;
    --bs-info: #1f4f4b;
    --bs-info-rgb: 31, 79, 75;
    --cassiopeia-color-warning: #7a5a00;
    --warning: #7a5a00;
    --warning-rgb: 122, 90, 0;
    --bs-warning: #7a5a00;
    --bs-warning-rgb: 122, 90, 0;
    --cassiopeia-color-danger: #b23d22;
    --danger: #b23d22;
    --danger-rgb: 178, 61, 34;
    --bs-danger: #b23d22;
    --bs-danger-rgb: 178, 61, 34;
    --cassiopeia-font-family-body: Nunito, system-ui, sans-serif;
    --cassiopeia-font-family-headings: Fredoka, system-ui, sans-serif;

    /* Bootstrap component vars derived from surfaces — */
    /* keeps accordion / card / modal / dropdown / pagination / */
    /* list-group / form / nav / offcanvas / toast on-palette. */
    --accordion-bg: var(--body-bg);
    --bs-accordion-bg: var(--body-bg);
    --accordion-color: var(--body-color);
    --bs-accordion-color: var(--body-color);
    --accordion-border-color: var(--border-color);
    --bs-accordion-border-color: var(--border-color);
    --accordion-btn-bg: var(--body-bg);
    --bs-accordion-btn-bg: var(--body-bg);
    --accordion-btn-color: var(--body-color);
    --bs-accordion-btn-color: var(--body-color);
    --accordion-active-bg: var(--light);
    --bs-accordion-active-bg: var(--light);
    --accordion-active-color: var(--body-color);
    --bs-accordion-active-color: var(--body-color);
    --card-bg: var(--body-bg);
    --bs-card-bg: var(--body-bg);
    --card-color: var(--body-color);
    --bs-card-color: var(--body-color);
    --card-border-color: var(--border-color);
    --bs-card-border-color: var(--border-color);
    --card-cap-bg: var(--secondary-bg);
    --bs-card-cap-bg: var(--secondary-bg);
    --card-cap-color: var(--body-color);
    --bs-card-cap-color: var(--body-color);
    --modal-bg: var(--body-bg);
    --bs-modal-bg: var(--body-bg);
    --modal-color: var(--body-color);
    --bs-modal-color: var(--body-color);
    --modal-border-color: var(--border-color);
    --bs-modal-border-color: var(--border-color);
    --modal-header-border-color: var(--border-color);
    --bs-modal-header-border-color: var(--border-color);
    --modal-footer-border-color: var(--border-color);
    --bs-modal-footer-border-color: var(--border-color);
    --dropdown-bg: var(--body-bg);
    --bs-dropdown-bg: var(--body-bg);
    --dropdown-color: var(--body-color);
    --bs-dropdown-color: var(--body-color);
    --dropdown-border-color: var(--border-color);
    --bs-dropdown-border-color: var(--border-color);
    --dropdown-link-color: var(--body-color);
    --bs-dropdown-link-color: var(--body-color);
    --dropdown-link-hover-bg: var(--secondary-bg);
    --bs-dropdown-link-hover-bg: var(--secondary-bg);
    --dropdown-link-hover-color: var(--body-color);
    --bs-dropdown-link-hover-color: var(--body-color);
    --dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-active-bg: var(--primary);
    --dropdown-divider-bg: var(--border-color);
    --bs-dropdown-divider-bg: var(--border-color);
    --list-group-bg: var(--body-bg);
    --bs-list-group-bg: var(--body-bg);
    --list-group-color: var(--body-color);
    --bs-list-group-color: var(--body-color);
    --list-group-border-color: var(--border-color);
    --bs-list-group-border-color: var(--border-color);
    --list-group-action-color: var(--body-color);
    --bs-list-group-action-color: var(--body-color);
    --list-group-action-hover-bg: var(--secondary-bg);
    --bs-list-group-action-hover-bg: var(--secondary-bg);
    --list-group-action-hover-color: var(--body-color);
    --bs-list-group-action-hover-color: var(--body-color);
    --list-group-active-bg: var(--primary);
    --bs-list-group-active-bg: var(--primary);
    --list-group-active-border-color: var(--primary);
    --bs-list-group-active-border-color: var(--primary);
    --pagination-bg: var(--body-bg);
    --bs-pagination-bg: var(--body-bg);
    --pagination-color: var(--body-color);
    --bs-pagination-color: var(--body-color);
    --pagination-border-color: var(--border-color);
    --bs-pagination-border-color: var(--border-color);
    --pagination-hover-bg: var(--secondary-bg);
    --bs-pagination-hover-bg: var(--secondary-bg);
    --pagination-hover-color: var(--body-color);
    --bs-pagination-hover-color: var(--body-color);
    --pagination-hover-border-color: var(--border-color);
    --bs-pagination-hover-border-color: var(--border-color);
    --pagination-active-bg: var(--primary);
    --bs-pagination-active-bg: var(--primary);
    --pagination-active-border-color: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --form-control-bg: var(--body-bg);
    --bs-form-control-bg: var(--body-bg);
    --form-control-color: var(--body-color);
    --bs-form-control-color: var(--body-color);
    --form-control-border-color: var(--border-color);
    --bs-form-control-border-color: var(--border-color);
    --form-check-bg: var(--body-bg);
    --bs-form-check-bg: var(--body-bg);
    --nav-link-color: var(--body-color);
    --bs-nav-link-color: var(--body-color);
    --nav-link-hover-color: var(--primary);
    --bs-nav-link-hover-color: var(--primary);
    --nav-tabs-border-color: var(--border-color);
    --bs-nav-tabs-border-color: var(--border-color);
    --nav-tabs-link-active-bg: var(--body-bg);
    --bs-nav-tabs-link-active-bg: var(--body-bg);
    --nav-tabs-link-active-color: var(--body-color);
    --bs-nav-tabs-link-active-color: var(--body-color);
    --nav-pills-link-active-bg: var(--primary);
    --bs-nav-pills-link-active-bg: var(--primary);
    --nav-underline-link-active-color: var(--primary);
    --bs-nav-underline-link-active-color: var(--primary);
    --offcanvas-bg: var(--body-bg);
    --bs-offcanvas-bg: var(--body-bg);
    --offcanvas-color: var(--body-color);
    --bs-offcanvas-color: var(--body-color);
    --offcanvas-border-color: var(--border-color);
    --bs-offcanvas-border-color: var(--border-color);
    --toast-bg: var(--body-bg);
    --bs-toast-bg: var(--body-bg);
    --toast-color: var(--body-color);
    --bs-toast-color: var(--body-color);
    --toast-border-color: var(--border-color);
    --bs-toast-border-color: var(--border-color);
    --toast-header-bg: var(--secondary-bg);
    --bs-toast-header-bg: var(--secondary-bg);
    --toast-header-color: var(--body-color);
    --bs-toast-header-color: var(--body-color);
    --toast-header-border-color: var(--border-color);
    --bs-toast-header-border-color: var(--border-color);
    --popover-bg: var(--body-bg);
    --bs-popover-bg: var(--body-bg);
    --popover-color: var(--body-color);
    --bs-popover-color: var(--body-color);
    --popover-border-color: var(--border-color);
    --bs-popover-border-color: var(--border-color);
    --popover-header-bg: var(--secondary-bg);
    --bs-popover-header-bg: var(--secondary-bg);
    --popover-header-color: var(--body-color);
    --bs-popover-header-color: var(--body-color);
    --breadcrumb-bg: var(--secondary-bg);
    --bs-breadcrumb-bg: var(--secondary-bg);
    --breadcrumb-divider-color: var(--secondary-color);
    --bs-breadcrumb-divider-color: var(--secondary-color);
    --breadcrumb-item-active-color: var(--body-color);
    --bs-breadcrumb-item-active-color: var(--body-color);
    --table-color: var(--body-color);
    --bs-table-color: var(--body-color);
    --table-border-color: var(--border-color);
    --bs-table-border-color: var(--border-color);
    --table-striped-bg: var(--secondary-bg);
    --bs-table-striped-bg: var(--secondary-bg);
    --table-hover-bg: var(--light);
    --bs-table-hover-bg: var(--light);
    --table-active-bg: var(--light);
    --bs-table-active-bg: var(--light);
}

body {
    background-color: #f6efdc;
    color: #2b2a24;
    font-family: Nunito, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #2b2a24;
    font-family: Fredoka, system-ui, sans-serif;
}

/* Brand and semantic foreground / background overrides */
.btn-primary, .btn-primary:focus {
    background-color: #1f6f6a;
    border-color: #1f6f6a;
    color: #fffaf0;
}
.btn-primary:hover, .btn-primary:active {
    background-color: color-mix(in srgb, #1f6f6a 88%, black);
    border-color: color-mix(in srgb, #1f6f6a 88%, black);
    color: #fffaf0;
}
.alert-primary {
    background-color: #8fd1c8;
    border-color: #8fd1c8;
    color: #1f4f4b;
}
.text-primary {
    color: #1f6f6a;
}
.bg-primary {
    background-color: #1f6f6a;
    border-color: #1f6f6a;
}
.border-primary {
    border-color: #1f6f6a !important;
}
.text-bg-primary {
    background-color: #1f6f6a;
    border-color: #1f6f6a;
    color: #fffaf0;
}
.badge.bg-primary {
    color: #fffaf0;
}
.btn-secondary, .btn-secondary:focus {
    background-color: #b23d22;
    border-color: #b23d22;
    color: #fffaf0;
}
.btn-secondary:hover, .btn-secondary:active {
    background-color: color-mix(in srgb, #b23d22 88%, black);
    border-color: color-mix(in srgb, #b23d22 88%, black);
    color: #fffaf0;
}
.alert-secondary {
    background-color: #fd7451;
    border-color: #fd7451;
    color: #6a1400;
}
.text-secondary {
    color: #b23d22;
}
.bg-secondary {
    background-color: #b23d22;
    border-color: #b23d22;
}
.border-secondary {
    border-color: #b23d22 !important;
}
.text-bg-secondary {
    background-color: #b23d22;
    border-color: #b23d22;
    color: #fffaf0;
}
.badge.bg-secondary {
    color: #fffaf0;
}
.btn-success, .btn-success:focus {
    background-color: #3d6b34;
    border-color: #3d6b34;
    color: #ffffff;
}
.btn-success:hover, .btn-success:active {
    background-color: color-mix(in srgb, #3d6b34 88%, black);
    border-color: color-mix(in srgb, #3d6b34 88%, black);
    color: #ffffff;
}
.alert-success {
    background-color: #3d6b34;
    border-color: #3d6b34;
    color: #ffffff;
}
.text-success {
    color: #3d6b34;
}
.bg-success {
    background-color: #3d6b34;
    border-color: #3d6b34;
}
.border-success {
    border-color: #3d6b34 !important;
}
.text-bg-success {
    background-color: #3d6b34;
    border-color: #3d6b34;
    color: #ffffff;
}
.badge.bg-success {
    color: #ffffff;
}
.btn-info, .btn-info:focus {
    background-color: #1f4f4b;
    border-color: #1f4f4b;
    color: #ffffff;
}
.btn-info:hover, .btn-info:active {
    background-color: color-mix(in srgb, #1f4f4b 88%, black);
    border-color: color-mix(in srgb, #1f4f4b 88%, black);
    color: #ffffff;
}
.alert-info {
    background-color: #1f4f4b;
    border-color: #1f4f4b;
    color: #ffffff;
}
.text-info {
    color: #1f4f4b;
}
.bg-info {
    background-color: #1f4f4b;
    border-color: #1f4f4b;
}
.border-info {
    border-color: #1f4f4b !important;
}
.text-bg-info {
    background-color: #1f4f4b;
    border-color: #1f4f4b;
    color: #ffffff;
}
.badge.bg-info {
    color: #ffffff;
}
.btn-warning, .btn-warning:focus {
    background-color: #7a5a00;
    border-color: #7a5a00;
    color: #ffffff;
}
.btn-warning:hover, .btn-warning:active {
    background-color: color-mix(in srgb, #7a5a00 88%, black);
    border-color: color-mix(in srgb, #7a5a00 88%, black);
    color: #ffffff;
}
.alert-warning {
    background-color: #7a5a00;
    border-color: #7a5a00;
    color: #ffffff;
}
.text-warning {
    color: #7a5a00;
}
.bg-warning {
    background-color: #7a5a00;
    border-color: #7a5a00;
}
.border-warning {
    border-color: #7a5a00 !important;
}
.text-bg-warning {
    background-color: #7a5a00;
    border-color: #7a5a00;
    color: #ffffff;
}
.badge.bg-warning {
    color: #ffffff;
}
.btn-danger, .btn-danger:focus {
    background-color: #b23d22;
    border-color: #b23d22;
    color: #ffffff;
}
.btn-danger:hover, .btn-danger:active {
    background-color: color-mix(in srgb, #b23d22 88%, black);
    border-color: color-mix(in srgb, #b23d22 88%, black);
    color: #ffffff;
}
.alert-danger {
    background-color: #ffdad6;
    border-color: #ffdad6;
    color: #93000a;
}
.text-danger {
    color: #b23d22;
}
.bg-danger {
    background-color: #b23d22;
    border-color: #b23d22;
}
.border-danger {
    border-color: #b23d22 !important;
}
.text-bg-danger {
    background-color: #b23d22;
    border-color: #b23d22;
    color: #ffffff;
}
.badge.bg-danger {
    color: #ffffff;
}
.site-banner, [class*="site-banner"], a.site-banner {
    background-color: #7a5a00;
    color: #fffaf0;
}
.bg-dark, .container-footer, body footer, .text-bg-dark {
    color: #f6f0e2;
}
.bg-dark a, .container-footer a, body footer a {
    color: #f6f0e2;
}

/* Form controls & muted text — override Bootstrap's hardcoded greys */
.text-muted, .text-body-secondary { color: #5b584c !important; }
.form-text { color: #5b584c; }
.form-control::placeholder, textarea::placeholder { color: #5b584c; opacity: 1; }
.form-label, .col-form-label, legend { color: #2b2a24; }
.form-control, .form-select { border-color: #8a846e; }
.form-control:focus, .form-select:focus {
        border-color: #1f6f6a;
        box-shadow: 0 0 0 .25rem rgba(31, 111, 106, .25);
}
.form-check-input:checked { background-color: #1f6f6a; border-color: #1f6f6a; }
.form-check-input:focus {
        border-color: #1f6f6a;
        box-shadow: 0 0 0 .25rem rgba(31, 111, 106, .25);
}
.invalid-feedback, .invalid-tooltip { color: #b23d22; }
.form-control.is-invalid, .was-validated .form-control:invalid,
.form-select.is-invalid, .was-validated .form-select:invalid { border-color: #b23d22; }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
        border-color: #b23d22;
        box-shadow: 0 0 0 .25rem rgba(178, 61, 34, .25);
}
.valid-feedback, .valid-tooltip { color: #3d6b34; }
.form-control.is-valid, .was-validated .form-control:valid,
.form-select.is-valid, .was-validated .form-select:valid { border-color: #3d6b34; }
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
        border-color: #3d6b34;
        box-shadow: 0 0 0 .25rem rgba(61, 107, 52, .25);
}

/* Card header — keep on-palette even for heading-tag headers */
.card-header {
    background-color: #f1e8d1;
    color: #2b2a24;
    border-bottom-color: #8a846e;
}

/* Inline code chip + pre panel from surfaces */
:not(pre) > code {
    background-color: #fbf4e2;
    padding: .15em .4em;
    border-radius: .25rem;
}
pre {
    background-color: #fbf4e2;
    padding: 1rem;
    border-radius: .375rem;
    border: 1px solid #8a846e;
}
pre code { background: none; padding: 0; }

/* Blockquote */
.blockquote-footer { color: #5b584c; }
.blockquote, figure.blockquote, .blockquote[class] {
    border-left: .25rem solid #7a5a00;
    padding-left: 1rem;
}

/* Accordion vars at component scope — Bootstrap declares these on .accordion, beating :root */
.accordion {
    --accordion-active-bg: #eae2cb;
    --bs-accordion-active-bg: #eae2cb;
    --accordion-active-color: #2b2a24;
    --bs-accordion-active-color: #2b2a24;
    --accordion-bg: #f6efdc;
    --bs-accordion-bg: #f6efdc;
    --accordion-color: #2b2a24;
    --bs-accordion-color: #2b2a24;
    --accordion-btn-bg: #f6efdc;
    --bs-accordion-btn-bg: #f6efdc;
    --accordion-btn-color: #2b2a24;
    --bs-accordion-btn-color: #2b2a24;
    --accordion-border-color: #8a846e;
    --bs-accordion-border-color: #8a846e;
}

/* Layout */
:root {
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-box-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --bs-box-shadow: 0 1px 3px rgba(0,0,0,.08);
    --bs-box-shadow-lg: 0 4px 8px rgba(0,0,0,.1);
}

@media (min-width: 1200px) {
    body .container { max-width: 1140px; }
}

body main, body .container-component, body article {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
body p, body .lead { margin-bottom: 1rem; }

.btn, .form-control, .form-select { border-radius: 0.375rem; }
.card, .alert, .modal-content { border-radius: 0.5rem; }
.badge { border-radius: 0.5rem; }

.card { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dropdown-menu, .modal-content { box-shadow: 0 4px 8px rgba(0,0,0,.1); }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Themer: inline navbar — desktop */
.container-header,
header.container-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .5rem 1rem;
    position: relative;
}
.container-header > .grid-child { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.container-header > .grid-child:first-child,
.container-header .container-logo,
.container-header .grid-child.container-logo { flex: 0 0 auto; min-width: 0; }
.container-header .navbar-brand { margin: 0; padding: 0; }
.container-header .site-title { font-weight: 600; line-height: 1; margin: 0; }
.container-header .container-nav,
.container-header .container-menu,
.container-header .grid-child.container-nav,
.container-header .grid-child.container-menu { flex: 1 1 0; min-width: 0; margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; justify-content: flex-end; padding: 0; }
.container-header .container-nav > .menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; margin: 0; }
.container-header .container-nav .navbar { width: 100%; padding: 0; margin: 0; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.container-header .container-search,
.container-header .container-nav .container-search,
.container-header .grid-child.container-search { flex: 0 1 20rem; min-width: 0; margin: 0; }
.container-header .container-nav .container-search,
.container-header .container-nav nav { margin-top: 0; }
.container-header .navbar-collapse { flex-grow: 1; flex-basis: auto; align-items: center; }
.container-header .mod-menu { display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: .5rem; row-gap: .25rem; margin: 0; padding: 0; list-style: none; align-items: center; justify-content: flex-start; }
.container-header .mod-menu > li { white-space: nowrap; }
.container-header .mod-menu > li > a { padding: .5rem .75rem; }
/* Themer: inline navbar — mobile */
@media (max-width: 991.98px) {
    .container-header,
    header.container-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; flex-wrap: initial; }
    .container-header > .grid-child:first-child,
    .container-header .container-logo,
    .container-header .grid-child.container-logo { grid-column: 2; justify-self: center; flex: initial; }
    .container-header .container-search,
    .container-header .grid-child.container-search { grid-column: 1 / -1; grid-row: 2; flex: initial; max-width: none; }
    .container-header .container-nav,
    .container-header .container-menu,
    .container-header .grid-child.container-nav,
    .container-header .grid-child.container-menu { grid-column: 3; justify-self: end; flex: initial; margin-left: 0; padding: 0; display: block; }
    .container-header .container-nav,
    .container-header .container-nav .navbar { position: static; }
    .container-header .container-nav > .menu { width: auto; }
    .container-header .container-nav .navbar { width: auto; padding: 0; margin: 0; flex-wrap: wrap; justify-content: flex-end; }
    .container-header .navbar-toggler { display: inline-block; margin-left: auto; }
    .container-header .navbar-collapse,
    .container-header .navbar-collapse.show,
    .container-header .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        background-color: var(--cassiopeia-color-primary, #1c3d5a);
        background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
        padding: 1rem;
        z-index: 1029;
        flex-basis: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        box-shadow: 0 .25rem .75rem rgba(0,0,0,.18);
    }
    .container-header .navbar-collapse .mod-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 0; }
    .container-header .navbar-collapse .mod-menu > li { white-space: normal; }
    .container-header .navbar-collapse .mod-menu > li > a { display: block; padding: .65rem .5rem; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; }
}
.container-header .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.25); padding: .5rem .75rem; line-height: 1; border-radius: .375rem; }
.container-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }
.container-header .navbar-toggler .icon-menu { color: inherit; }

/* Menu polish — stock Cassiopeia mod_menu rough edges */
.metismenu.mod-menu[class] .metismenu-item.parent { flex-wrap: nowrap; }

/* Custom CSS — Components → Cassiopeia Themer → Layout → Custom CSS */
/* Prepperland: Themer → Layout → Custom CSS. Kept in khaki/site/brand;
   paste the whole file, don't edit it on the site. The app's look:
   cream ground, teal sky, sun, green and tomato hills, Fredoka and
   Nunito, flat colour, rounded shapes. */

/* The landscape behind the header, tall enough to show the sky, the sun
   and the hills, with the logo and the menu up in the sky. Ink text
   over the sky, as in the app. */
/* header.container-header to outrank Themer's own padding. */
header.container-header {
  background: #8FD1C8 url("/images/brand/header.svg") center bottom / cover no-repeat;
  color: #2B2A24;
  min-height: clamp(200px, 17vw, 320px);
  align-items: flex-start !important;
  padding-top: 1.25rem;
  padding-bottom: 0;
  /* The logo lines up with the page below it. */
  padding-inline: max(var(--pl-gutter), calc((100% - 1320px) / 2));
  box-shadow: none;
}
.container-header > .grid-child { padding-inline: 0; }
.container-header .mod-menu { justify-content: flex-end; }
@media (max-width: 767.98px) {
  header.container-header {
    background-image: url("/images/brand/header-phone.svg");
    min-height: 170px;
    padding-top: .75rem;
    align-items: start !important;
  }
}
.container-header .navbar-brand img {
  max-height: 64px;
  width: auto;
}
@media (max-width: 767.98px) {
  .container-header .navbar-brand img { max-height: 48px; }
}

/* The menu: Fredoka, ink on the sky, a cream pill for the page you're
   on and on hover, like the app's selected tab. */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #2B2A24;
  text-decoration: none;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  transition: background-color .15s ease;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
  background: rgba(255, 250, 240, .65);
  color: #1F4F4B;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  background: #FFFAF0;
  color: #1F4F4B;
  box-shadow: 0 1px 0 rgba(43, 42, 36, .12);
}
.container-header .mod-menu > li > a::after,
.container-header .mod-menu > li.active > a::before { display: none; }

/* On a phone the menu opens under the button as a cream card. */
.container-header .navbar-toggler {
  color: #2B2A24;
  background: rgba(255, 250, 240, .75);
  border: 0;
  border-radius: 999px;
}
@media (max-width: 991.98px) {
  .container-header .navbar-collapse,
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    background: #FFFAF0 !important;
    background-image: none !important;
    border-radius: 0 0 20px 20px;
  }
  .container-header .navbar-collapse .mod-menu > li > a {
    color: #2B2A24;
    border-bottom: 1px solid #E6DBBF;
    border-radius: 0;
  }
}

/* Reading: a comfortable measure, headings in Fredoka. Cassiopeia's
   side columns drop to nothing below 1320 wide, so the page keeps a
   gutter of its own, and an article is a centred column. */
:root { --pl-gutter: clamp(1rem, 4vw, 3rem); }
.site-grid { row-gap: 0; }
.container-component { padding-inline: var(--pl-gutter); }
.com-content-article { max-width: 72ch; margin: 1.5rem auto 0; }
.container-component,
.com-content-article {
  font-size: 1.0625rem;
  line-height: 1.7;
}
.com-content-article__body,
.com-content-article .item-page {
  max-width: 68ch;
}
h1, h2, h3, .page-header h1, .page-header h2 {
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.005em;
}
.page-header h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }

/* Rounded, flat cards and pill buttons, as in the app. */
.card, .moduletable, .sidebar-right .card, .sidebar-left .card {
  border: 1px solid #E6DBBF;
  border-radius: 20px;
  background: #FFFAF0;
  box-shadow: none;
}
.btn { border-radius: 999px; font-weight: 700; padding-inline: 1.25rem; }

/* The home page: the welcome, what the app does with its real screens
   in a phone frame (site/tools/make-screens.sh), privacy, what's free,
   and questions. It's an article, so Metagen gives it a canonical link,
   Open Graph and a Twitter card and checks its headings; the Home menu
   item's page class, pl-page-home, lets it run the full width rather
   than the reading column. */
.pl-page-home .container-component { padding: 0; }
.pl-page-home main { margin: 0; padding: 0; }
.pl-page-home .com-content-article,
.pl-page-home .com-content-article__body { max-width: none; margin: 0; }
.pl-home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pl-gutter);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.pl-home h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  color: #2B2A24;
}
.pl-phone {
  display: block;
  width: 100%;
  height: auto;
}

.pl-hero {
  display: grid;
  margin-bottom: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 2rem 4rem;
  align-items: center;
  padding: 2.5rem 0 3rem;
}
.pl-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
  line-height: 1.02;
  margin: 0 0 1rem;
  color: #2B2A24;
}
.pl-hero p.pl-lede {
  font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem);
  color: #5B584C;
  margin: 0 0 1.25rem;
  max-width: 34rem;
}
.pl-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .9rem;
  border: 1px solid #E6DBBF;
  border-radius: 999px;
  background: #FFFAF0;
  color: #1F4F4B;
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
  font-size: .95rem;
}
.pl-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-weight: 700;
}
.pl-ticks li::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .8rem;
  margin: 0 .6rem 0 .15rem;
  border: solid #3D6B34;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) translateY(-.15rem);
}
.pl-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}
.pl-cta .btn { font-family: Fredoka, system-ui, sans-serif; font-weight: 600; }
.pl-avail { margin: 0; color: #5B584C; font-weight: 700; }
.pl-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.25rem;
}
/* Store badges: set the height only, never both (their proportions differ). */
.pl-stores img { display: block; height: 44px; width: auto; }
.pl-hero__phone {
  width: min(100%, 330px);
  justify-self: center;
  transform: rotate(2deg);
}

/* Each feature is a card in one of the landscape's colours, softened,
   with the phone rising out of its bottom edge. */
.pl-row {
  --pl-tint: #DCEFEA;
  --pl-accent: #1F6F6A;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 0 clamp(1.5rem, .5rem + 3vw, 3.5rem);
  border-radius: 28px;
  background: var(--pl-tint);
  overflow: hidden;
}
.pl-row:nth-of-type(4n+3) { --pl-tint: #FBEBC4; --pl-accent: #7A5A00; }
.pl-row:nth-of-type(4n+4) { --pl-tint: #F9DACF; --pl-accent: #9C3219; }
.pl-row:nth-of-type(4n+1) { --pl-tint: #DCE8D3; --pl-accent: #3D6B34; }
.pl-row .pl-phone {
  width: min(100%, 270px);
  justify-self: center;
  align-self: start;
  margin: 2.5rem 0 -230px;
}
.pl-row--flip .pl-row__text { order: 2; }
.pl-row__text { max-width: 32rem; padding-block: 2.5rem; }
.pl-row__text p { color: #2B2A24; }
.pl-row__text p:last-child { margin-bottom: 0; }
.pl-row__text h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: .4rem;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: var(--pl-accent);
}
.pl-row a { color: var(--pl-accent); }
.pl-more { font-weight: 700; }
.pl-more::after { content: " \2192"; }

.pl-band,
.pl-plan {
  background: #FFFAF0;
  border: 1px solid #E6DBBF;
  border-radius: 28px;
}
.pl-band {
  margin: 2.5rem 0 3rem;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.pl-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.pl-points h3, .pl-plan h3 {
  font-size: 1.25rem;
  color: #1F6F6A;
  margin: 0 0 .35rem;
}
.pl-points p { margin: 0; }

.pl-plans { padding: 1.5rem 0 1rem; }
.pl-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.pl-plan { padding: 1.5rem 1.75rem; }
.pl-plan--more { border: 2px solid #1F6F6A; }
.pl-plan ul { margin: 0; padding-left: 1.2rem; }
.pl-plan li { margin: .25rem 0; }
.pl-plan li::marker { color: #5F9A52; }
.pl-plan__note { margin: 1rem 0 0; color: #5B584C; font-size: .95rem; }

.pl-close {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 0 0;
}
.pl-small { font-size: .9rem; color: #5B584C; margin-top: 1.5rem; }

@media (max-width: 899.98px) {
  .pl-hero, .pl-row { grid-template-columns: minmax(0, 1fr); }
  .pl-hero { text-align: center; padding-top: 1.5rem; }
  .pl-hero p.pl-lede { margin-inline: auto; }
  .pl-eyebrow { font-size: .8rem; padding-inline: .7rem; }
  .pl-ticks, .pl-cta, .pl-stores { justify-content: center; }
  .pl-hero__phone { width: min(70%, 260px); }
  .pl-row { padding-top: .5rem; }
  .pl-row__text { padding-bottom: 0; }
  .pl-row .pl-phone { width: min(70%, 230px); margin: 0 0 -190px; }
  .pl-row--flip .pl-row__text { order: 0; }
  .pl-row__text { max-width: none; }
}

/* The hills along the top of the footer, which takes the tomato hill's
   colour beneath them. Its text is a darker ink than the page's: the
   page's ink on tomato is 4.1 to 1, short of AA for small text, and
   #1A1915 is 5. */
.container-footer {
  position: relative;
  margin-top: 160px;
  background: #E2603F;
  color: #1A1915;
}
.container-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: url("/images/brand/footer-hills-160.svg") center bottom / cover no-repeat;
  pointer-events: none;
}
.container-footer .grid-child {
  padding-block: 1.25rem 1.5rem;
  padding-inline: max(var(--pl-gutter), calc((100% - 1320px) / 2));
}
.container-footer a {
  color: #1A1915;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.container-footer .mod-custom { width: 100%; }
.pl-footer {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 2rem;
  font-size: .95rem;
}
.pl-footer p { margin: 0; }
.pl-footer__name {
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
}
.pl-footer__brand p:not(.pl-footer__name) { max-width: 24rem; }
.pl-footer__links { margin: 0; padding: 0; list-style: none; }
.pl-footer__links li { margin: .2rem 0; }
.pl-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(43, 42, 36, .25);
  padding-top: 1rem;
  font-size: .85rem;
}
@media (max-width: 767.98px) {
  .pl-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-footer__brand { grid-column: 1 / -1; }
}

/* The list pages (/lists/…): each item's words in bold on a line of
   their own, then why, then any Amazon link, labelled Ad before it. */
.pl-lede { font-size: 1.15rem; }
.pl-disclosure {
  padding: .75rem 1rem;
  border-radius: 16px;
  background: #FFFAF0;
  border: 1px solid #E6DBBF;
  font-size: .95rem;
}
.pl-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.pl-list li { padding: .75rem 0; border-bottom: 1px solid #E6DBBF; }
.pl-list li strong { display: block; font-family: Fredoka, system-ui, sans-serif; font-weight: 600; }
.pl-buy { display: block; margin-top: .35rem; font-weight: 700; }
.pl-ad {
  display: inline-block;
  padding: 0 .5rem;
  border-radius: 999px;
  background: #F6EFDC;
  border: 1px solid #5B584C;
  color: #2B2A24;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: .1em;
}
.pl-source { font-size: .9rem; color: #5B584C; }

/* The /lists page: the articles as cards (templates/…/category/cards.php),
   grouped under Get ready and When it happens. */
.pl-cards__group { margin-top: 2rem; }
.pl-cards .card-title { font-family: Fredoka, system-ui, sans-serif; font-weight: 600; }
.pl-cards__count { background: #8FD1C8; color: #1F4F4B; font-size: .9rem; font-weight: 700; }

/* The member pages: each card's header in the app's colours, sky for a
   list, sun for a warning (past its best), tomato for danger (out of
   date). AppSync reads its header colour from --appsync-card-header-bg.
   Ink passes AA on all three as heading text. */
.com-appsync { --appsync-card-header-bg: #8FD1C8; }
.com-appsync .appsync-tone-warning { --appsync-card-header-bg: #F2B632; }
.com-appsync .appsync-tone-danger { --appsync-card-header-bg: #E2603F; }
.com-appsync .appsync-card > .card-header { color: #2B2A24; border-bottom-color: #E6DBBF; }

/* Outline buttons in teal, not Cassiopeia's navy, filled when pressed
   or chosen; on a coloured card header, on cream so they still read. */
.btn-outline-primary { color: #1F6F6A; border-color: #1F6F6A; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible,
.btn-outline-primary:active, .btn-check:checked + .btn-outline-primary {
  color: #FFFAF0;
  background-color: #1F6F6A;
  border-color: #1F6F6A;
}
.card-header .btn-outline-primary:not(:hover):not(:active) { background-color: #FFFAF0; }

/* A list in a card sits on the card's cream with light lines between,
   as in the app, not on the page's ground with dark ones; a warning or
   danger card is edged in its header's colour. */
.card > .list-group {
  --list-group-border-color: #E6DBBF;
  --bs-list-group-border-color: #E6DBBF;
}
.card > .list-group > .list-group-item { background-color: #FFFAF0; }
.card > .list-group > .list-group-item-action:hover,
.card > .list-group > .list-group-item-action:focus-visible { background-color: #FBF4E2; }
.com-appsync .appsync-card.appsync-tone-warning { border-color: #F2B632 !important; }
.com-appsync .appsync-card.appsync-tone-danger { border-color: #E2603F !important; }

/* Dark appearance — active when data-bs-theme="dark" */
[data-bs-theme="dark"] {
    --body-bg: #15130c;
    --body-bg-rgb: 21, 19, 12;
    --bs-body-bg: #15130c;
    --bs-body-bg-rgb: 21, 19, 12;
    --cassiopeia-color-page-bg: #15130c;
    --body-color: #e8e2d4;
    --body-color-rgb: 232, 226, 212;
    --bs-body-color: #e8e2d4;
    --bs-body-color-rgb: 232, 226, 212;
    --cassiopeia-color-text: #e8e2d4;
    --bs-emphasis-color: #e8e2d4;
    --secondary-color: #cdc6b0;
    --secondary-color-rgb: 205, 198, 176;
    --bs-secondary-color: #cdc6b0;
    --bs-secondary-color-rgb: 205, 198, 176;
    --cassiopeia-color-headings: #e8e2d4;
    --secondary-bg: #2c2a21;
    --secondary-bg-rgb: 44, 42, 33;
    --bs-secondary-bg: #2c2a21;
    --bs-secondary-bg-rgb: 44, 42, 33;
    --tertiary-bg: #222017;
    --tertiary-bg-rgb: 34, 32, 23;
    --bs-tertiary-bg: #222017;
    --bs-tertiary-bg-rgb: 34, 32, 23;
    --border-color: #96917c;
    --border-color-rgb: 150, 145, 124;
    --bs-border-color: #96917c;
    --bs-border-color-rgb: 150, 145, 124;
    --primary: #8ad4cd;
    --primary-rgb: 138, 212, 205;
    --bs-primary: #8ad4cd;
    --bs-primary-rgb: 138, 212, 205;
    --link-color: #8ad4cd;
    --link-color-rgb: 138, 212, 205;
    --bs-link-color: #8ad4cd;
    --bs-link-color-rgb: 138, 212, 205;
    --cassiopeia-color-primary: #8ad4cd;
    --cassiopeia-color-link: #8ad4cd;
    --secondary: #ffb4a2;
    --secondary-rgb: 255, 180, 162;
    --bs-secondary: #ffb4a2;
    --bs-secondary-rgb: 255, 180, 162;
    --accent: #f9bd39;
    --accent-rgb: 249, 189, 57;
    --bs-accent: #f9bd39;
    --bs-accent-rgb: 249, 189, 57;
    --primary-bg-subtle: #1f6f6a;
    --primary-bg-subtle-rgb: 31, 111, 106;
    --bs-primary-bg-subtle: #1f6f6a;
    --bs-primary-bg-subtle-rgb: 31, 111, 106;
    --bs-primary-text-emphasis: #a5efe8;
    --danger: #ffb4ab;
    --danger-rgb: 255, 180, 171;
    --bs-danger: #ffb4ab;
    --bs-danger-rgb: 255, 180, 171;
}