.fan-zone {
    max-width: 1170px;
    padding-block: clamp(18px, 3vw, 36px) 64px;
}

.fan-zone :is(h1, h2, h3, p) { margin: 0; }
.fan-zone :is(h1, h2, h3, p, strong) { overflow-wrap: anywhere; }
.fan-zone :is(form, .fan-stream, .fan-sidebar) { min-width: 0; }
.fan-zone :is(#feed, #comments, #compose, .fan-post) { scroll-margin-top: 20px; }

.fan-hero {
    --ui-focus: #febd09;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: clamp(24px, 5vw, 52px);
    border-radius: var(--ui-card-radius);
    background: linear-gradient(112deg, #2c1040 12%, #45176a 78%, #54267b);
    color: #fff;
}

.fan-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 330px;
    aspect-ratio: 1;
    inset: -120px -45px auto auto;
    border: 1px solid #ffffff30;
    border-radius: 50%;
    box-shadow: 0 0 0 34px #ffffff12, 0 0 0 68px #ffffff0d;
    pointer-events: none;
}

.fan-hero-copy { max-width: 650px; min-width: 0; }
.fan-hero h1 { font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.035em; line-height: 1.05; }
.fan-hero .fan-kicker { margin-bottom: 12px; color: #ffcf4b; font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.fan-hero .fan-hero-description { margin-top: 14px; color: #f0e6f6; line-height: 1.55; white-space: pre-line; }
.fan-hero .fan-members { margin-top: 16px; font-size: .84rem; color: #f0e6f6; }
.fan-membership { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .88rem; font-weight: 700; }
.fan-membership summary { padding: 8px 0; cursor: pointer; }
body.public-site main.fan-zone .fan-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #ffcf4b;
    border-radius: var(--ui-button-radius);
    background: #ffcf4b;
    color: #2c1040;
    font-size: var(--ui-control-size);
    font-weight: 800;
    text-align: center;
}
body.public-site main.fan-zone .fan-hero-cta:hover { background: #ffe38c; border-color: #ffe38c; color: #2c1040; }
.fan-hero-cta > span { font-size: 1.2rem; line-height: 1; }

.fan-zone > .site-tabs { margin-bottom: 20px; }
.fan-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(240px, 1fr); gap: 20px; }
.fan-stream, .fan-sidebar, .fan-feed { display: grid; align-content: start; gap: 14px; }
.fan-card {
    min-width: 0;
    padding: clamp(16px, 2.4vw, 24px);
    border: 1px solid var(--line);
    border-radius: var(--ui-card-radius);
    background: var(--panel);
}
.fan-card h2, .fan-feed h2 { font-size: 1.16rem; }
.fan-card > :is(p, .ui-button, .ui-link, .fan-form, .fan-club-list, .fan-comments) { margin-top: 12px; }
.fan-card .ui-button { display: inline-flex; align-items: center; }
.fan-narrow { max-width: 680px; }
.fan-muted, .fan-form small, .fan-post-meta .fan-time, .fan-comments time { color: var(--muted); }
.fan-notice { margin-bottom: 14px !important; padding: 13px 16px; border: 1px solid var(--line); border-left: 4px solid var(--lime); background: var(--panel); border-radius: var(--ui-button-radius); }
.fan-error { border-left-color: #c74863; }
.fan-empty { padding-block: 34px; text-align: center; }
.fan-empty .fan-initial { margin: 0 auto 12px; }
.fan-empty p { color: var(--muted); }
.fan-empty .ui-link { display: inline-flex; }

.fan-form, .fan-form label { display: grid; gap: 8px; }
.fan-form label, .fan-upload summary { font-size: .875rem; font-weight: 700; }
.fan-form :is(input, textarea, select) { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); font-size: 1rem; }
.fan-form textarea { resize: vertical; }
.fan-form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.fan-upload summary { padding: 8px 0; cursor: pointer; }
.fan-upload label { margin: 8px 0; }

.fan-initial {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ui-tab-active-bg) 13%, var(--panel));
    color: var(--ui-link);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
}
.fan-club-list, .fan-comments { list-style: none; padding: 0; margin: 0; }
.fan-club-list li + li, .fan-comments li + li { border-top: 1px solid var(--line); }
.fan-club-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; }
.fan-club-link small { display: block; margin-top: 3px; color: var(--muted); }
.fan-club-link:hover strong { color: var(--ui-link-hover); text-decoration: underline; }
.fan-club-arrow { color: var(--muted); font-size: 1.45rem; }
.fan-club-list-full li { padding: 4px 0; }
.fan-club-list .fan-club-description { margin: 0 0 12px 52px; color: var(--muted); white-space: pre-line; }

.fan-post-header { display: flex; align-items: flex-start; gap: 10px; }
.fan-post-meta { flex: 1; min-width: 0; }
.fan-post-meta strong { display: block; }
.fan-post-meta :is(a, time), .fan-comments time { font-size: .8rem; }
.fan-post-meta .ui-link { margin-right: 6px; overflow-wrap: anywhere; }
.fan-time:hover { text-decoration: underline; }
.fan-manage { flex: 0 1 auto; max-width: 48%; text-align: right; }
.fan-manage summary { padding: 3px 0; color: var(--muted); font-size: .78rem; cursor: pointer; }
.fan-manage form { margin-top: 6px; }
.fan-zone button.account-danger { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--ui-button-radius); background: var(--panel); color: var(--text); font: inherit; font-size: .78rem; cursor: pointer; }
.fan-zone button.account-danger:hover { border-color: #c74863; }
.fan-post .fan-text { margin-block: 15px; }
.fan-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.fan-photo { display: block; margin-top: 14px; border-radius: var(--ui-field-radius); overflow: hidden; background: var(--bg); }
.fan-photo img { display: block; width: 100%; height: auto; max-height: 580px; object-fit: contain; }
.fan-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--line); }
.fan-reaction, .fan-reaction-count { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; font-size: .8rem; font-weight: 700; }
body.public-site main .fan-reaction { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--ui-button-radius); }
.fan-reaction:is(:hover,[aria-pressed='true']) { color: var(--ui-link); text-decoration: underline; }
.fan-reaction-count, .fan-count { color: var(--muted); }
.fan-post-actions :is(.fan-reaction,.fan-reaction-count) > span[aria-hidden] { font-size: 1.1rem; }
.fan-comments li { display: flex; gap: 10px; padding: 12px 0; }
.fan-comment-body { flex: 1; min-width: 0; }
.fan-comment-body .fan-text { margin-top: 4px; }
.fan-comment-body .fan-manage { max-width: 100%; text-align: left; }
.fan-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding-top: 12px; color: var(--muted); font-size: .85rem; }

@media (max-width: 740px) {
    .fan-grid { grid-template-columns: minmax(0, 1fr); }
    .fan-hero { gap: 16px; }
    .fan-hero::before { inset-inline-end: -180px; }
    .fan-zone :is(.fan-hero-cta, .fan-form button, .fan-reaction) { min-height: 44px; }
}