/* Fan card / membership page: paper, ink and bronze, built on editorial-pages.css.
   membership.css (card faces, comparison table) is shared with purchase and
   my_cards, so everything here stays scoped to .page-fan-card. */
.page-fan-card main section[id] { scroll-margin-top: 110px; }
.page-fan-card main a:focus-visible, .page-fan-card main button:focus-visible, .page-fan-card .compare-scroll:focus-visible { outline: 2px solid #82613b; outline-offset: 4px; }

/* ---- Masthead ---- */
.fc-masthead .masthead-grid { align-items: center; }
.fc-masthead .masthead-copy h1 { max-width: 13ch; }
.fc-masthead .belong { display: inline-flex; padding: 14px 18px; }
.fc-masthead .belong a { color: #674820; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; font-size: .84rem; }
.fc-holder-note { margin: 22px 0 0 !important; font-size: .82rem !important; color: #666760; }
.fc-holder-note b { color: #25282c; font-weight: 600; }
.fc-holder-note a { color: #674820; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.fc-masthead .masthead-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
/* Wallet cascade: each card's header strip stays readable, the front card shows in full */
.fc-stack { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1.2; margin: 0 0 34px auto; }
.fc-stack .mcard.rc { position: absolute; width: 80%; transform: rotate(-5deg); transition: transform .7s var(--m-ease), top .7s var(--m-ease), left .7s var(--m-ease); }
.fc-stack-1 { left: 0; top: 0; }
.fc-stack-2 { left: 10%; top: 19%; }
.fc-stack-front { left: 20%; top: 38%; }
.fc-stack:hover .fc-stack-1 { top: -4%; left: -2%; }
.fc-stack:hover .fc-stack-front { top: 41%; left: 21%; }

.fc-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.fc-nav a { padding: 20px 12px; border-right: 1px solid var(--rule); color: #666760; font-size: .69rem; transition: background .2s, color .2s; }
.fc-nav a:first-child { padding-left: 0; }
.fc-nav a:last-child { border-right: 0; }
.fc-nav a:hover { color: #674820; background: #eee8dc; }

/* ---- Tier chapters ---- */
.page-fan-card .section-head > .lead { max-width: 430px; margin: 0; }
.fc-chapter { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); padding: 44px 0 56px; border-top: 1px solid var(--rule); }
.fc-chapter:first-child { border-top-color: #25282c; }
.fc-chapter:last-child { padding-bottom: 0; }
.fc-chapter-intro { position: sticky; top: 110px; align-self: start; }
.fc-chapter-num { display: block; font: italic 2.6rem/1 'Playfair Display', serif; color: #82613b; letter-spacing: -.03em; }
.fc-chapter-intro h3 { font: 500 1.65rem/1.15 'Playfair Display', serif; letter-spacing: -.025em; margin: 18px 0 12px; }
.fc-chapter-intro p { font-size: .86rem; line-height: 1.8; color: #666760; margin: 0 0 18px; max-width: 280px; }
.fc-chapter-from { display: inline-block; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #66645c; }

.page-fan-card .fc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
.page-fan-card .mcard-cell.popular .mcard-ribbon { top: -11px; }
.page-fan-card .mcard-price { flex-wrap: wrap; }
.page-fan-card .mcard-price .per { color: #66645c; }
.fc-tagline { font-size: .84rem; line-height: 1.7; color: #666760; margin: 14px 0 0; }
.page-fan-card .mcard-unlock { margin: 18px 0 22px; }
.fc-name { font: 500 1.3rem/1.2 'Playfair Display', serif; letter-spacing: -.02em; color: #25282c; margin: 0 0 10px; }
.fc-rail-note { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .78rem; color: #666760; }

/* ---- Comparison ---- */
.fc-compare { background: var(--paper-alt, #eee9e0); }
.fc-compare-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #66645c; }
.fc-link-btn { background: none; border: 0; padding: 4px 0; font: 600 .78rem 'Inter', sans-serif; letter-spacing: 0; text-transform: none; color: #674820; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fc-link-btn:hover { color: #25282c; }
.fc-table th.feat { font-weight: 400; min-width: 280px; }
.fc-table thead th { vertical-align: bottom; }
.fc-table .fc-group-row > * { background: #f4f0e8; }
.fc-table .fc-group-row th.feat { background: #f4f0e8; padding: 0; }
.fc-group-toggle, .fc-group-label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; font: 700 .68rem 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #82613b; text-align: left; white-space: nowrap; }
.fc-group-toggle { background: none; border: 0; cursor: pointer; }
.fc-group-toggle::before { content: '−'; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid #cfc2a8; border-radius: 50%; font-size: .8rem; letter-spacing: 0; line-height: 1; }
.fc-group.is-collapsed .fc-group-toggle::before { content: '+'; }
.fc-group-toggle small { margin-left: auto; font-weight: 500; letter-spacing: .04em; text-transform: none; color: #8a8478; font-size: .7rem; }
.fc-group-toggle:hover span { color: #25282c; }
.fc-group.is-collapsed .fc-feat-row { display: none; }
.page-fan-card .ctable tbody tr.fc-group-row:hover > * { background: #efe9dd; }
.fc-tierview { display: none; }

/* ---- After purchase / FAQ / closing ---- */
.fc-next .ed-steps { border-top-color: #25282c; }
.fc-questions { background: var(--paper-alt, #eee9e0); }
.fc-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
.fc-faq-grid > div > p { color: #666760; max-width: 300px; font-size: .88rem; line-height: 1.8; }
.fc-faq-list details { border-top: 1px solid #cfc6b6; padding: 22px 0; }
.fc-faq-list details:last-child { border-bottom: 1px solid #cfc6b6; }
.fc-faq-list summary { cursor: pointer; font-size: .92rem; font-weight: 500; color: #25282c; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.fc-faq-list summary::-webkit-details-marker { display: none; }
.fc-faq-list summary::after { content: '+'; color: #82613b; font-size: 1.1rem; line-height: 1.2; }
.fc-faq-list details[open] summary::after { content: '−'; }
.fc-faq-list p { font-size: .84rem; color: #666760; line-height: 1.85; margin: 16px 28px 0 0; }
.fc-faq-list p a { color: #674820; text-decoration: underline; text-underline-offset: 3px; }

.fc-closing-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: end; }
.fc-closing h2 { color: #faf5e9; margin: 18px 0 16px; }
.fc-closing p { color: #c6c3bc; max-width: 520px; margin: 0; font-size: .94rem; line-height: 1.8; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .fc-chapter { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .fc-chapter-intro { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
    .fc-chapter-num { grid-row: span 3; }
    .fc-chapter-intro h3 { margin-top: 0; }
    .fc-chapter-intro p { max-width: 480px; }
    .fc-chapter-from { justify-self: start; }
}
@media (max-width: 900px) {
    .fc-masthead .masthead-grid { grid-template-columns: minmax(0, 1fr); }
    .fc-masthead .masthead-copy h1 { max-width: none; }
    .fc-hero-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
    .fc-stack { max-width: 400px; margin: 8px 0 0; }
    .page-fan-card .section-head { flex-direction: column; align-items: start; gap: 18px; }
}
@media (max-width: 760px) {
    .fc-hero-aside { display: block; }
    .fc-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fc-nav a { padding: 16px 10px; font-size: .64rem; }
    .fc-nav a:nth-child(2) { border-right: 0; }
    .fc-nav a:nth-child(3) { padding-left: 0; }
    .fc-nav a:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .page-fan-card .fc-pair { grid-template-columns: minmax(0, 1fr); gap: 48px; }

    /* Swap the wide matrix for one-tier-at-a-time panels */
    .fc-compare .compare-wrap, .fc-compare-bar { display: none; }
    .fc-tierview { display: block; }
    .fc-tabs { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc((100% - 100vw) / 2); padding: 2px calc((100vw - 100%) / 2) 8px; }
    .fc-tabs::-webkit-scrollbar { display: none; }
    .fc-tierview:not(.is-enhanced) .fc-tabs { display: none; }
    .fc-tab { flex: none; padding: 10px 16px; border: 1px solid #cfc6b6; border-radius: 999px; background: #fffdf8; font: 500 .8rem 'Inter', sans-serif; color: #25282c; cursor: pointer; }
    .fc-tab[aria-selected="true"] { background: #25282c; border-color: #25282c; color: #faf5e9; }
    .fc-panel { margin-top: 18px; padding: 22px 20px; background: #fffdf8; border: 1px solid var(--rule); border-top: 1px solid #25282c; }
    .fc-tierview:not(.is-enhanced) .fc-panel + .fc-panel { margin-top: 24px; }
    .fc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
    .fc-panel-head h3 { font-size: 1.25rem; margin: 0 0 4px; }
    .fc-panel-head span { font-size: .74rem; color: #66645c; }
    .fc-panel-head .btn { flex: none; width: auto; }
    .fc-panel-group { padding: 16px 0 4px; }
    .fc-panel-group h4 { font: 700 .62rem 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #82613b; margin: 0 0 10px; }
    .fc-panel-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .fc-panel-group li { display: flex; gap: 10px; font-size: .86rem; color: #3d3f44; line-height: 1.5; }
    .fc-panel-group li::before { content: '✓'; color: #3f7d58; flex: none; }
    .fc-panel-missing { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .78rem; line-height: 1.7; color: #8a8478; }
    .fc-panel-missing b { color: #66645c; font-weight: 600; }

    .fc-faq-grid, .fc-closing-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 440px) {
    .fc-masthead .btn-group { flex-direction: column; align-items: stretch; }
    .fc-masthead .btn-group .btn, .fc-closing .btn-group .btn { justify-content: center; }
    .fc-closing .btn-group { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .fc-stack .mcard { transition: none; }
    .fc-stack .mcard.rc { transition: none; }
    .fc-stack:hover .fc-stack-1 { top: 0; left: 0; }
    .fc-stack:hover .fc-stack-front { top: 38%; left: 20%; }
    .page-fan-card .mcard-cell .mcard.rc, .page-fan-card .mcard-cell:hover .mcard.rc { transform: none; transition: none; }
}

/* ---- Hero: larger stack, clean back cards, contact shadow ---- */
.fc-masthead .masthead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fc-stack { max-width: 580px; margin: 0 0 40px auto; }
.fc-stack::after {
    content: ''; position: absolute; left: 14%; right: -2%; bottom: -6%; height: 16%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(37,39,43,.28), transparent 70%); filter: blur(10px);
}
.fc-stack .mcard.rc { z-index: 1; }
.fc-stack .fc-stack-front { z-index: 3; }
.fc-stack .fc-stack-2 { z-index: 2; }
/* Back cards: only the header strip is ever visible, so keep the rest as clean material */
.fc-stack-back > :is(.rc-chip, .rc-nfc, .rc-number, .rc-dates, .rc-holder, .rc-holo) { visibility: hidden; }
.fc-stack-back { filter: brightness(.94) saturate(.95); }
@media (max-width: 900px) { .fc-stack { max-width: 420px; } }