:root {
    --ink: #f5efe7;
    --muted: #b6aa9b;
    --panel: rgba(28, 24, 21, .88);
    --line: rgba(228, 202, 160, .18);
    --gold: #d9b677;
    --gold-dark: #8f6a35;
    --danger: #d9867c;
    --shadow: 0 28px 90px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 5%, rgba(129, 79, 42, .24), transparent 32%),
        radial-gradient(circle at 87% 20%, rgba(101, 82, 57, .18), transparent 30%),
        #0e0d0c;
    font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
    min-height: 94px;
    padding: 18px clamp(22px, 5vw, 78px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(12, 11, 10, .74);
    backdrop-filter: blur(18px);
}

.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand span { font: italic 42px/1 "Times New Roman", serif; letter-spacing: -2px; }
.brand small { margin-top: 6px; color: var(--gold); font-size: 9px; letter-spacing: 5px; }
.store-link, .dashboard-header nav a { color: var(--muted); text-decoration: none; }
.store-link:hover, .dashboard-header nav a:hover { color: var(--ink); }
.dashboard-header nav { display: flex; align-items: center; gap: 22px; }

.login-shell {
    width: min(1180px, calc(100% - 44px));
    min-height: calc(100vh - 174px);
    margin: auto;
    padding: 80px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(350px, .8fr);
    align-items: center;
    gap: clamp(45px, 8vw, 120px);
}

.eyebrow { margin: 0 0 11px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
.login-copy h1, .dashboard-hero h1 {
    max-width: 720px;
    margin: 0 0 24px;
    font: 400 clamp(48px, 6.2vw, 88px)/.98 Georgia, serif;
    letter-spacing: -3px;
}
.login-copy > p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 17px; }
.benefit-list { margin: 32px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.benefit-list li::before { content: "✦"; margin-right: 12px; color: var(--gold); }

.login-card, .panel {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(37, 31, 27, .96), rgba(19, 17, 15, .98));
    box-shadow: var(--shadow);
}
.login-card::after {
    content: "";
    position: absolute;
    inset: auto -70px -90px auto;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(217, 182, 119, .22);
    border-radius: 50%;
}
.vip-mark { position: absolute; top: 24px; right: 26px; color: rgba(217, 182, 119, .22); font: 700 54px/1 Georgia, serif; }
.login-card h2, .panel h2, .library-heading h2 { margin: 0 0 10px; font: 400 30px/1.15 Georgia, serif; }
.muted { color: var(--muted); }
.login-card form, .stack-form { margin-top: 28px; display: grid; gap: 9px; }
label { margin-top: 8px; font-size: 11px; font-weight: 750; letter-spacing: .2px; }
input, textarea, select {
    width: 100%;
    padding: 13px 14px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: none;
    background: rgba(255, 255, 255, .045);
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 182, 119, .1); }
button {
    padding: 13px 17px;
    color: #17120d;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    background: linear-gradient(135deg, #ead09f, #be8f4e);
    font-weight: 800;
}
button:hover { filter: brightness(1.06); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .58; transform: none; }
.login-card form button { margin-top: 8px; }
.status { min-height: 24px; color: #b9d8bd; }
.status.error { color: #f0a69e; }
.fine-print { margin: 20px 0 0; color: #7f756b; font-size: 10px; }
footer { padding: 28px; color: #7e746a; border-top: 1px solid var(--line); text-align: center; font-size: 11px; }

.dashboard-shell, .admin-shell { width: min(1420px, calc(100% - 48px)); margin: auto; padding: 52px 0 90px; }
.dashboard-hero { padding: 44px 0 58px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.dashboard-hero h1 { margin: 0; font-size: clamp(42px, 5vw, 70px); }
.dashboard-hero.compact { padding-top: 20px; }
.dashboard-hero.compact h1 { font-size: clamp(42px, 5vw, 66px); }
.membership-chip { min-width: 180px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.membership-chip span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; }
.membership-chip strong { display: block; margin-top: 5px; color: var(--gold); }
.library-heading, .panel-heading { margin: 45px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.library-heading h2, .panel-heading h2 { margin: 0; }
.secondary-button, .text-button, .mini-button { color: var(--ink); border: 1px solid var(--line); background: transparent; font-weight: 650; }
.text-button { padding: 8px 11px; }

.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.content-card { min-height: 390px; display: grid; grid-template-rows: 190px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 18px 55px rgba(0, 0, 0, .2); }
.content-art { display: grid; place-items: center; color: rgba(255,255,255,.78); background: linear-gradient(145deg, #4b3427, #18130f); font: 400 64px/1 Georgia, serif; }
.type-video .content-art { background: linear-gradient(145deg, #44313a, #181216); }
.type-pdf .content-art { background: linear-gradient(145deg, #3f3b2c, #16150f); }
.type-zip .content-art { background: linear-gradient(145deg, #293d3b, #0f1716); }
.content-body { padding: 25px; display: flex; flex-direction: column; }
.content-body h3 { margin: 0 0 10px; font: 400 25px/1.2 Georgia, serif; }
.content-body .muted { flex: 1; margin-bottom: 20px; }

.admin-grid, .management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; align-items: start; }
.panel { padding: 30px; border-radius: 16px; }
.panel h2 { font-size: 27px; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: auto; }
.wide-panel { min-width: 0; }
.wide-panel .panel-heading { margin: 0 0 18px; }
.management-list { max-height: 520px; overflow: auto; }
.management-row { padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.management-row strong { display: block; }
.management-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 7px; flex-shrink: 0; }
.mini-button { padding: 7px 10px; font-size: 10px; }
.mini-button.danger { color: var(--danger); border-color: rgba(217, 134, 124, .35); }

html { scroll-behavior: smooth; }
.member-nav { position: sticky; top: 0; z-index: 20; padding: 11px clamp(22px, 5vw, 78px); display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(14, 13, 12, .94); backdrop-filter: blur(18px); }
.member-nav a { flex: 0 0 auto; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 750; letter-spacing: .6px; }
.member-nav a:hover { color: var(--gold); }
.welcome-hero { min-height: 570px; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(125deg, #221a15, #100e0d); box-shadow: var(--shadow); }
.liam-portrait { width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: center top; filter: saturate(.78) sepia(.08); }
.welcome-copy { padding: clamp(38px, 7vw, 105px); display: flex; flex-direction: column; justify-content: center; }
.welcome-copy h1 { margin: 0; font: 400 clamp(48px, 6vw, 84px)/1 Georgia, serif; letter-spacing: -3px; }
.inner-circle-line { margin: 24px 0 36px; color: var(--gold); font: italic 24px/1.4 Georgia, serif; }
.membership-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.membership-overview div, .membership-details div { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.membership-overview span, .membership-details span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1.6px; }
.membership-overview strong, .membership-details strong { display: block; margin-top: 6px; color: var(--gold); }
.member-section { padding: 78px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 48px; }
.section-heading { margin: 0 0 28px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading h2, .request-panel h2, .membership-panel h2 { margin: 0; font: 400 clamp(34px, 4vw, 52px)/1.1 Georgia, serif; }
.section-heading > p { max-width: 490px; margin: 0; color: var(--muted); text-align: right; }
.release-card { min-width: 0; display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.release-art { min-height: 310px; display: grid; place-items: center; overflow: hidden; color: rgba(255,255,255,.68); background: linear-gradient(145deg, #513827, #17120f); font: 32px/1 Georgia, serif; letter-spacing: 4px; }
.release-art img { width: 100%; height: 100%; object-fit: cover; }
.release-body { min-width: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.release-body h3, .story-card h3, .community-panel h3, .journal-list h3 { margin: 0 0 10px; font: 400 26px/1.18 Georgia, serif; }
.release-date { color: var(--gold); font-size: 11px; }
.release-body audio, .release-body video { width: 100%; max-height: 360px; margin: 12px 0; }
.release-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; }
.content-grid, .listening-grid { display: grid; gap: 22px; }
.compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.compact-release { display: grid; grid-template-columns: 140px minmax(0, 1fr); }
.compact-release .release-art { min-height: 220px; }
.compact-release .release-body { padding: 22px; }
.compact-release .release-body h3 { font-size: 22px; }
.month-group + .month-group { margin-top: 38px; }
.month-group > h3 { margin: 0 0 16px; color: var(--gold); font: 400 24px/1 Georgia, serif; }
.split-section, .community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.split-section .section-heading { min-height: 88px; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.story-card { padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: rgba(26,22,19,.74); }
.story-card > p { color: #d3c8bb; font: 17px/1.75 Georgia, serif; white-space: pre-wrap; }
.story-card .release-card { margin-top: 24px; }
.community-panel { min-height: 460px; }
.poll-options { margin-top: 24px; display: grid; gap: 10px; }
.poll-options label { margin: 0; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.poll-options input { width: auto; }
.poll-options button { margin-top: 10px; }
.journal-list { max-height: 440px; overflow: auto; }
.journal-list article { padding: 18px 0; border-top: 1px solid var(--line); }
.journal-list time { color: var(--gold); font-size: 10px; }
.journal-list p { color: var(--muted); white-space: pre-wrap; }
.request-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(350px, 1.15fr); gap: clamp(30px, 7vw, 100px); align-items: start; }
.request-panel .stack-form { margin: 0; }
.membership-panel { padding: clamp(32px, 6vw, 72px); margin-top: 78px; border: 1px solid rgba(217,182,119,.34); border-radius: 22px; background: linear-gradient(145deg, rgba(63,45,31,.8), rgba(21,18,16,.95)); }
.membership-details { margin: 32px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.primary-link { display: inline-block; padding: 14px 19px; color: #17120d; border-radius: 9px; text-decoration: none; background: linear-gradient(135deg, #ead09f, #be8f4e); font-weight: 800; }
.empty-state { width: 100%; margin: 0; padding: 32px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.request-row { align-items: flex-start; }

@media (max-width: 980px) {
    .login-shell { grid-template-columns: 1fr; padding: 55px 0; }
    .login-copy h1 { max-width: 800px; }
    .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-grid, .management-grid { grid-template-columns: 1fr; }
    .welcome-hero { grid-template-columns: 1fr; }
    .liam-portrait { min-height: 520px; max-height: 640px; }
    .split-section, .community-grid, .story-grid, .request-panel { grid-template-columns: 1fr; }
    .membership-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .site-header { min-height: 78px; padding: 14px 18px; }
    .brand span { font-size: 33px; }
    .brand small { letter-spacing: 3px; }
    .store-link { font-size: 12px; }
    .dashboard-header nav { gap: 9px; }
    .dashboard-header nav a { display: none; }
    .login-shell, .dashboard-shell, .admin-shell { width: min(100% - 28px, 1420px); }
    .login-copy h1 { font-size: 48px; letter-spacing: -2px; }
    .dashboard-hero { align-items: stretch; flex-direction: column; }
    .content-grid { grid-template-columns: 1fr; }
    .management-row { align-items: flex-start; flex-direction: column; }
    .row-actions { width: 100%; }
    .row-actions button { flex: 1; }
    .login-card, .panel { padding: 24px; }
    .member-nav { padding-inline: 16px; gap: 18px; }
    .dashboard-shell { padding-top: 24px; }
    .welcome-hero { min-height: 0; }
    .liam-portrait { min-height: 360px; max-height: 430px; }
    .welcome-copy { padding: 30px 24px; }
    .welcome-copy h1 { font-size: 44px; letter-spacing: -2px; }
    .membership-overview, .membership-details { grid-template-columns: 1fr; }
    .member-section { padding: 55px 0; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-heading > p { text-align: left; }
    .release-card, .compact-release { grid-template-columns: 1fr; }
    .release-art, .compact-release .release-art { min-height: 290px; }
    .compact-grid { grid-template-columns: 1fr; }
    .membership-panel { margin-top: 55px; }
}