/* RISE design system.
   Light is the default. Dark follows the device setting unless the visitor picks one
   with the theme button (stored per browser). Navy anchors the header and footer in
   both themes. Gold is a fill or sits on navy; gold TEXT on light uses --gold-ink. */

:root {
    --navy: #0B1E3D;
    --navy-2: #13294d;
    --gold: #BB9457;
    --gold-soft: #D6B47A;
    --gold-ink: #7F5C1E;
    --white: #ffffff;

    --bg: #FBF8F2;
    --bg-alt: #F3EEE3;
    --surface: #ffffff;
    --surface-2: #F7F3EA;
    --text: #1B2A41;
    --heading: #0B1E3D;
    --muted: #4E5D72;
    --line: #E1D9C8;
    --link: #1F4E8C;
    --link-hover: #163a6a;
    --accent-text: var(--gold-ink);
    --field: #ffffff;
    --field-line: #8593a6;
    --ok: #1d6b3f; --ok-bg: #e8f5ee;
    --warn: #8a5300; --warn-bg: #fff4e0;
    --bad: #a32a1c; --bad-bg: #fdeeea;
    --info-bg: #eaf1fa;
    --shadow: 0 1px 2px rgba(11, 30, 61, .05), 0 14px 34px -16px rgba(11, 30, 61, .22);

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --radius: 12px;
    --z-nav: 100;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #0A1731;
    --bg-alt: #0E1E3D;
    --surface: #12264A;
    --surface-2: #0F2143;
    --text: #DCE3EE;
    --heading: #F5F1E8;
    --muted: #A5B2C6;
    --line: #243B63;
    --link: #9DC0F0;
    --link-hover: #c4dafa;
    --accent-text: var(--gold-soft);
    --field: #0B1A36;
    --field-line: #3C5580;
    --ok: #7fd4a0; --ok-bg: #11332a;
    --warn: #f0c070; --warn-bg: #3a2c10;
    --bad: #ff9a8a; --bad-bg: #3d1a17;
    --info-bg: #13294d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0A1731; --bg-alt: #0E1E3D; --surface: #12264A; --surface-2: #0F2143;
        --text: #DCE3EE; --heading: #F5F1E8; --muted: #A5B2C6; --line: #243B63;
        --link: #9DC0F0; --link-hover: #c4dafa; --accent-text: var(--gold-soft);
        --field: #0B1A36; --field-line: #3C5580;
        --ok: #7fd4a0; --ok-bg: #11332a; --warn: #f0c070; --warn-bg: #3a2c10; --bad: #ff9a8a; --bad-bg: #3d1a17; --info-bg: #13294d;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -18px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--bg); min-height: 100dvh; display: flex; flex-direction: column; transition: background .2s ease, color .2s ease; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; color: var(--heading); text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
h3 { font-size: 1.2rem; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: 6px; font-weight: 700; z-index: 200; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.subtle { color: var(--muted); }

/* ---------- Header ---------- */
.site-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--navy); border-bottom: 1px solid rgba(187, 148, 87, .3); transition: box-shadow .2s ease; }
.site-nav.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nav-container { max-width: 1240px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; margin-right: auto; }
.logo img { width: 40px; height: 28px; object-fit: contain; transition: transform .2s ease; }
.logo:hover { color: var(--white); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links > a, .nav-text { position: relative; color: rgba(255, 255, 255, .86); text-decoration: none; font: 600 .93rem/1 var(--sans); padding: 8px 0; transition: color .2s ease; }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.nav-links > a:hover, .nav-links > a[aria-current="page"], .nav-text:hover { color: var(--white); }
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.site-nav :focus-visible { outline-color: var(--gold-soft); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy); padding: 10px 18px; border-radius: 999px; font: 700 .93rem var(--sans); text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; white-space: nowrap; }
.nav-cta:hover { background: var(--gold-soft); color: var(--navy); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(187, 148, 87, .3); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: var(--white); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.icon-btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--gold-soft); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .moon, :root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: block; } }

/* Account menu (only rendered after sign-in) */
.account { position: relative; }
.account summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--white); font: 600 .93rem var(--sans); padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); }
.account summary::-webkit-details-marker { display: none; }
.account summary:hover { border-color: var(--gold-soft); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; font-size: .85rem; }
.account-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: drop .18s ease; }
.account-panel a, .account-panel button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font: 500 .95rem var(--sans); background: none; border: 0; cursor: pointer; }
.account-panel a:hover, .account-panel button:hover { background: var(--surface-2); color: var(--heading); }
.account-panel .panel-label { padding: 8px 12px 4px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.account-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* Mobile drawer */
.menu-toggle { display: none; }
.drawer-backdrop { display: none; }
@media (max-width: 1080px) {
    .menu-toggle { display: inline-grid; }
    .nav-links { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); z-index: 120; flex-direction: column; align-items: stretch; gap: 0; padding: 84px 24px 32px; background: var(--navy); box-shadow: -20px 0 60px rgba(0, 0, 0, .35); transform: translateX(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility .32s; overflow-y: auto; visibility: hidden; }
    .nav-links.is-open { transform: none; visibility: visible; }
    .nav-links > a { font: 500 1.6rem/1.2 var(--serif); padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .nav-links > a::after { display: none; }
    .nav-links > a[aria-current="page"] { color: var(--gold-soft); }
    .drawer-extra { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
    .drawer-extra .nav-cta { justify-content: center; padding: 14px; font-size: 1rem; }
    .drawer-extra .nav-text { font-size: 1.05rem; padding: 8px 0; }
    .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(5, 12, 26, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
    .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .nav-actions .desktop-only { display: none; }
    .drawer-close { position: absolute; top: 16px; right: 18px; }
}
@media (min-width: 1081px) { .drawer-extra, .drawer-close { display: none !important; } }
body.menu-open { overflow: hidden; }

/* ---------- Layout ---------- */
.site-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 48px 24px 72px; min-width: 0; }
.page-narrow { max-width: 560px; margin: 24px auto 0; }
.page-narrow.wide { max-width: 760px; }
.center { text-align: center; }
.page-wide { max-width: 1100px; margin: 0 auto; }
.lede { font-size: 1.12rem; color: var(--muted); margin-top: 12px; max-width: 60ch; }
.center .lede { margin-left: auto; margin-right: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.center .actions { justify-content: center; }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-2); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11, 30, 61, .25); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-soft); color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(187, 148, 87, .35); }
.btn-ghost { background: transparent; color: var(--heading); border-color: color-mix(in srgb, var(--heading) 35%, transparent); }
.btn-ghost:hover { border-color: var(--heading); background: color-mix(in srgb, var(--heading) 6%, transparent); color: var(--heading); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* ---------- Messages ---------- */
.messages { max-width: 760px; width: 100%; margin: 20px auto 0; padding: 0 24px; }
.message { padding: 14px 18px; border-left: 4px solid var(--link); background: var(--info-bg); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 8px; color: var(--text); }
.message-success { border-color: var(--ok); background: var(--ok-bg); }
.message-warning { border-color: var(--warn); background: var(--warn-bg); }
.message-error { border-color: var(--bad); background: var(--bad-bg); }

/* ---------- Forms and panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.panel h1 { margin-bottom: 8px; font-size: clamp(1.7rem, 4vw, 2.1rem); }
.panel > p { color: var(--muted); }
.form-field { margin-top: 20px; }
.form-field label, .form-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.form-field input:not([type=checkbox]):not([type=radio]), .form-field select, .form-field textarea,
.auth-main input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .auth-main select {
    width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea { min-height: 180px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .auth-main input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 30%, transparent); }
.field-help { font-size: .9rem; color: var(--muted); margin-top: 6px; }
.errorlist { list-style: none; color: var(--bad); font-size: .95rem; margin-top: 6px; }
.form-alert { padding: 14px 18px; background: var(--bad-bg); border-left: 4px solid var(--bad); border-radius: 0 var(--radius) var(--radius) 0; color: var(--bad); margin-top: 20px; }
.form-foot { margin-top: 22px; font-size: .97rem; color: var(--muted); }
.form-foot a { font-weight: 600; }
.divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .9rem; margin: 22px 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.notice { padding: 20px 24px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-left: 4px solid var(--gold); border-radius: var(--radius); margin: 24px 0; }
.notice p + p { margin-top: 10px; }

/* allauth pages share this look */
.auth-main { max-width: 560px; }
.auth-main h1 { margin-bottom: 14px; }
.auth-main p { margin-bottom: 14px; color: var(--muted); }
.auth-main form { margin-top: 18px; }
.auth-main form p, .auth-main form div { margin-bottom: 14px; }
.auth-main label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.auth-main button, .auth-main input[type=submit] { min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0; background: var(--navy); color: var(--white); font: 700 1rem var(--sans); cursor: pointer; margin-top: 8px; }
.auth-main ul { padding-left: 20px; }
.auth-main .errorlist { padding-left: 0; }

/* ---------- Cards and data ---------- */
.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.card h2 { font-size: .76rem; font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.card p { font-size: 1.1rem; font-weight: 500; color: var(--heading); }
.card p.small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 28px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; text-decoration: none; color: inherit; display: block; transition: transform .2s ease, box-shadow .2s ease; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.stat-value { font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 10px; color: var(--muted); font-weight: 500; }
.stat.is-ok .stat-value { color: var(--ok); }
.stat.is-warn .stat-value { color: var(--warn); }
.stat.is-bad .stat-value { color: var(--bad); }
.table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .97rem; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--navy); color: var(--white); font-size: .82rem; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table .num { text-align: right; }
.data-table .empty { text-align: center; color: var(--muted); padding: 24px; }
.is-ok { color: var(--ok); font-weight: 600; }
.is-bad { color: var(--bad); font-weight: 600; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.section-block { margin-top: 44px; }
.section-block > h2 { margin-bottom: 4px; }
.section-block > p { color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 24px; }
.toolbar .form-field { margin: 0; }
.toolbar input, .toolbar select { min-height: 42px !important; padding: 8px 12px !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .82); padding: 48px 24px 24px; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-name { font-family: var(--serif); font-size: 1.2rem; color: var(--white); margin-bottom: 6px; }
.site-footer p { font-size: .95rem; max-width: 40ch; }
.site-footer h2 { color: var(--gold-soft); font: 700 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; font-size: .95rem; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.site-footer .footer-legal { max-width: 1100px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; }
@media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > div:first-child { grid-column: 1 / -1; } }

.prose h2 { margin: 36px 0 12px; }
.prose p, .prose ul { margin-top: 12px; }
.prose ul { padding-left: 22px; }
.prose li { margin-top: 6px; }

@media (max-width: 760px) {
    .nav-container { padding: 10px 16px; gap: 10px; }
    .site-main { padding: 28px 18px 48px; }
    .panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The header's blur makes it the containing box for fixed children, which would trap the
   drawer inside the bar. Drop the blur while the drawer is open, and keep the dimmed
   backdrop underneath the header. */
body.menu-open .site-nav { backdrop-filter: none; background: var(--navy); }
.drawer-backdrop { z-index: 90 !important; }

/* Celebrations (12.13): shown once, dismissed with one tap, never blocks anything */
.celebrate { position: fixed; right: 20px; bottom: 20px; z-index: 260; max-width: min(380px, calc(100vw - 40px)); animation: rise-in .4s cubic-bezier(.2, .8, .2, 1); }
.celebrate-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--line)); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); }
.celebrate-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.celebrate-card p { color: var(--muted); margin-bottom: 14px; }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
#rise-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 255; }