/* =============================================================
   GCR Lander — vintage parchment / map-cartouche styling.
   Adapted from /gcr/ assets/css/gcr-vintage.css for the JS-rendered
   lander at /global-capital-rotation/.

   Targets the prose sections emitted by hero.js, how-it-works.js,
   and faq.js. Explicitly excludes the interactive map
   (.gcr-hero__globe), the inline signup form (.gcr-hero__signup),
   and the sticky/exit-intent capture (.gcr-capture, .gcr-overlay) —
   those keep their existing dark/branded styling.

   Loads LAST (after styles.css, hero.css, capture.css) so cascade
   wins on overlapping rules.
   ============================================================= */


/* ---------- Tan parchment cards ----------
   Three targets:
     .gcr-hiw           — "How the map is built" explainer (how-it-works.js)
     .gcr-faq           — Questions (faq.js)
     .gcr-hero__event   — Featured-event banner inside hero (hero.js)
   The hero's outer .gcr-hero is NOT carded because it contains the
   WebGL globe mount, which must remain dark.
*/
.gcr-hiw,
.gcr-faq {
    position: relative;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 2px,
            rgba(110, 70, 30, 0.018) 2px 3px
        ),
        linear-gradient(180deg, #f7e9c4 0%, #ecdcb1 100%);
    color: #3d2208;
    border: 1px solid #c9a259;
    border-radius: 4px;
    padding: 32px 36px 28px;
    margin: 24px auto;
    max-width: 980px;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(201, 162, 89, 0.4),
        inset 0 0 38px rgba(110, 70, 30, 0.08);
    overflow: visible;
}

/* Aged-paper foxing stains (multiply-blended radial blots in the corners). */
.gcr-hiw::before,
.gcr-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 6%,  rgba(110, 70, 30, 0.20) 0%, transparent 14%),
        radial-gradient(circle at 94% 12%, rgba(110, 70, 30, 0.15) 0%, transparent 16%),
        radial-gradient(circle at 22% 96%, rgba(110, 70, 30, 0.18) 0%, transparent 14%),
        radial-gradient(circle at 88% 92%, rgba(110, 70, 30, 0.14) 0%, transparent 16%),
        radial-gradient(circle at 60% 50%, rgba(110, 70, 30, 0.04) 0%, transparent 60%);
    mix-blend-mode: multiply;
    border-radius: 4px;
}

/* Brass corner brackets — schematic-instrument cue. */
.gcr-hiw::after,
.gcr-faq::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 8px;
    background-image:
        linear-gradient(#c9a259, #c9a259), linear-gradient(#c9a259, #c9a259),
        linear-gradient(#c9a259, #c9a259), linear-gradient(#c9a259, #c9a259),
        linear-gradient(#c9a259, #c9a259), linear-gradient(#c9a259, #c9a259),
        linear-gradient(#c9a259, #c9a259), linear-gradient(#c9a259, #c9a259);
    background-repeat: no-repeat;
    background-size:
        14px 1.5px, 1.5px 14px,
        14px 1.5px, 1.5px 14px,
        14px 1.5px, 1.5px 14px,
        14px 1.5px, 1.5px 14px;
    background-position:
        left top,    left top,
        right top,   right top,
        left bottom, left bottom,
        right bottom, right bottom;
}

/* ---------- Headings: italic-serif cartouche with brass underline ---------- */
.gcr-hiw .gcr-section-heading,
.gcr-faq .gcr-section-heading,
.gcr-hiw h2,
.gcr-faq h2 {
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.55rem;
    color: #0a2a47;
    border-bottom: 1.5px solid #c9a259;
    padding-bottom: 10px;
    margin: 0 0 18px;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    text-align: left;
}

.gcr-hiw h3,
.gcr-faq h3 {
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    color: #0a2a47;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 14px;
    margin-bottom: 6px;
}

/* ---------- Body type ---------- */
.gcr-hiw p,
.gcr-hiw li,
.gcr-faq p,
.gcr-faq li,
.gcr-faq dt,
.gcr-faq dd,
.gcr-faq summary {
    font-family: 'Georgia', 'Fraunces', serif;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #3d2208;
    position: relative;
    z-index: 1;
}

.gcr-hiw strong,
.gcr-faq strong { color: #0a2a47; }

.gcr-hiw em,
.gcr-faq em { color: #5a3a10; font-style: italic; }


/* ---------- "How it works" specific: step list with brass glyph ---------- */
.gcr-hiw__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    position: relative;
    z-index: 1;
}

.gcr-hiw__step {
    background: rgba(255, 248, 220, 0.55);
    border: 1px solid rgba(201, 162, 89, 0.5);
    border-radius: 3px;
    padding: 18px 18px 16px;
    text-align: left;
}

.gcr-hiw__glyph {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 1.6rem;
    color: #c9a259;
    line-height: 1;
    margin-bottom: 8px;
}

.gcr-hiw__step h3 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 1.1rem;
}

.gcr-hiw__step p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
}


/* ---------- FAQ specific: <details>/<summary> on parchment ---------- */
.gcr-faq__list {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.gcr-faq__item {
    border-bottom: 1px solid rgba(201, 162, 89, 0.4);
    padding: 12px 0;
}
.gcr-faq__item:last-child { border-bottom: none; }

.gcr-faq__item > summary {
    cursor: pointer;
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    font-weight: 600;
    color: #0a2a47;
    font-size: 1.05rem;
    list-style: none;
    padding-right: 24px;
    position: relative;
}
.gcr-faq__item > summary::-webkit-details-marker { display: none; }
.gcr-faq__item > summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 0;
    color: #c9a259;
    font-family: 'Georgia', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
}
.gcr-faq__item[open] > summary::after { content: '−'; }

.gcr-faq__item dt {
    display: inline;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    color: inherit;
}

.gcr-faq__item dd {
    margin: 8px 0 4px 0;
    color: #3d2208;
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    line-height: 1.65;
    font-style: normal;
}


/* ---------- Featured-event banner inside the hero ----------
   The hero outer card stays dark (it hosts the globe), but this
   little event-of-the-day callout becomes a parchment band, mirroring
   the treatment used on /gcr/.
*/
.gcr-hero__event {
    background: linear-gradient(180deg, #f7e9c4 0%, #ecdcb1 100%);
    border: 1px solid #c9a259;
    border-radius: 4px;
    color: #3d2208;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 12px 18px;
    max-width: 780px;
    margin: 18px auto 8px;
}
.gcr-hero__event-label {
    color: #5a3a10;
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 4px;
}
.gcr-hero__event-body { color: #3d2208; font-size: 0.95rem; }
.gcr-hero__event-body strong { color: #0a2a47; }
.gcr-hero__event-amt {
    color: #0a2a47;
    font-family: ui-monospace, 'Menlo', monospace;
    font-style: normal;
}


/* ---------- Top-3 teaser: paired parchment heading + tile rail ---------- */
.gcr-hero__teaser-heading {
    background: linear-gradient(180deg, #f7e9c4 0%, #ecdcb1 100%);
    color: #0a2a47;
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 14px 22px 10px;
    margin: 18px auto 0;
    max-width: 780px;
    border: 1px solid #c9a259;
    border-bottom: 1px dashed rgba(201, 162, 89, 0.5);
    border-radius: 4px 4px 0 0;
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
}

.gcr-hero__teaser {
    background: linear-gradient(180deg, #ecdcb1 0%, #e0cf9a 100%);
    border: 1px solid #c9a259;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 16px 22px 18px;
    margin: 0 auto 8px;
    max-width: 780px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
    list-style: none;
}

.gcr-hero__teaser .gcr-tile {
    background: rgba(255, 248, 220, 0.75);
    border: 1px solid rgba(201, 162, 89, 0.55);
    color: #3d2208;
}
.gcr-hero__teaser .gcr-tile__iso {
    color: #0a2a47;
    font-family: 'Fraunces', 'Georgia', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.95rem;
}
.gcr-hero__teaser .gcr-tile__score {
    color: #1f6b4f;
    font-family: ui-monospace, 'Menlo', monospace;
    font-weight: 700;
    font-size: 1.05rem;
}
.gcr-hero__teaser .gcr-tile--falling .gcr-tile__score { color: #8b1f1f; }
.gcr-hero__teaser .gcr-tile__label {
    color: #5a3a10;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.78rem;
}


/* ---------- Mobile tightening ---------- */
@media (max-width: 720px) {
    .gcr-hiw,
    .gcr-faq {
        padding: 22px 18px 18px;
        margin: 18px 12px;
    }
    .gcr-hiw .gcr-section-heading,
    .gcr-faq .gcr-section-heading,
    .gcr-hiw h2,
    .gcr-faq h2 { font-size: 1.3rem; }

    .gcr-hiw__steps { gap: 14px; }
}