/* ============================================================
   THE BOUJEE BLONDE — On-site guide pages (2026-07-06)
   Web adaptation of the PDF guide components. Uses site.css tokens.
   Scoped under .guide-article so nothing leaks into other pages.
   ============================================================ */

.guide-article { background: var(--bb-cream); }

.guide-article .g-sec { padding: 56px 0; }
.guide-article .g-sec:nth-child(even) { background: var(--bb-cream-deep); }

.guide-article .section-num {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--bb-gold);
    letter-spacing: .2em;
    margin-bottom: 6px;
}
.guide-article h2.title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.08;
    color: var(--bb-ink);
    margin-bottom: 8px;
}
.guide-article h2.title .script { font-size: 1.05em; }
.guide-article .subtitle {
    font-size: 1.05rem;
    color: var(--bb-taupe);
    margin-bottom: 26px;
    max-width: 620px;
    font-weight: 300;
}
.guide-article p { color: var(--bb-ink-soft); font-weight: 300; line-height: 1.7; }

/* ---- callouts ---- */
.guide-article .callout {
    background: var(--bb-blush-soft);
    border-left: 4px solid var(--bb-gold);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 14px 0 20px;
}
.guide-article .callout.dark { background: var(--bb-ink); border-left-color: var(--bb-gold); }
.guide-article .callout.dark p, .guide-article .callout.dark h3 { color: var(--bb-cream); }
.guide-article .callout h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: 6px;
    color: var(--bb-ink);
}
.guide-article .callout p { font-size: 0.99rem; }

/* ---- checklists ---- */
.guide-article .check { list-style: none; display: grid; gap: 12px; margin: 8px 0 20px; padding: 0; }
.guide-article .check li {
    display: flex; gap: 13px; align-items: flex-start;
    font-size: 1.02rem; color: var(--bb-ink-soft); font-weight: 300; line-height: 1.6;
}
.guide-article .check li::before {
    content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px;
    border: 1.6px solid var(--bb-gold); border-radius: 4px; background: var(--bb-white);
}
.guide-article .check.dot li::before { border-radius: 50%; border-color: var(--bb-rose-deep); }
.guide-article .check li strong { color: var(--bb-ink); font-weight: 500; }

/* ---- data table ---- */
.guide-article .match-wrap { overflow-x: auto; margin: 8px 0 18px; }
.guide-article .match { width: 100%; border-collapse: collapse; }
.guide-article .match th {
    text-align: left; font-family: var(--font-body); font-size: 0.72rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--bb-gold-deep);
    padding: 12px 14px; border-bottom: 2px solid var(--bb-gold);
}
.guide-article .match td {
    font-size: 0.98rem; padding: 13px 14px; border-bottom: 1px solid var(--bb-line);
    color: var(--bb-ink-soft); vertical-align: top; font-weight: 300; line-height: 1.55;
}
.guide-article .match td.c { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--bb-ink); }
.guide-article .match tr:nth-child(even) td { background: rgba(231, 217, 195, .28); }

/* ---- timeline ---- */
.guide-article .timeline { display: grid; gap: 16px; margin-top: 6px; }
.guide-article .tl { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.guide-article .tl .when { text-align: right; }
.guide-article .tl .when b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--bb-gold-deep); line-height: 1.05; font-weight: 500; }
.guide-article .tl .when span { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-taupe); }
.guide-article .tl .what { border-left: 2px solid var(--bb-sand); padding: 0 0 6px 20px; position: relative; }
.guide-article .tl .what::before {
    content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--bb-gold); border: 2px solid var(--bb-cream);
}
.guide-article .tl .what h4 { font-family: var(--font-display); font-size: 1.18rem; color: var(--bb-ink); margin-bottom: 4px; font-weight: 500; }
.guide-article .tl .what p { font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 560px) {
    .guide-article .tl { grid-template-columns: 1fr; gap: 6px; }
    .guide-article .tl .when { text-align: left; }
}

/* ---- steps ---- */
.guide-article .steps { display: grid; gap: 18px; margin-top: 8px; }
.guide-article .step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.guide-article .step .n {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-gold), var(--bb-gold-deep));
    color: #fff; font-family: var(--font-display); font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center;
}
.guide-article .step .b h4 { font-family: var(--font-display); font-size: 1.2rem; color: var(--bb-ink); margin-bottom: 4px; font-style: italic; font-weight: 500; }
.guide-article .step .b p { font-size: 0.98rem; }

/* ---- two-column cards ---- */
.guide-article .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .guide-article .cols2 { grid-template-columns: 1fr; } }
.guide-article .cols2 .card {
    background: var(--bb-white); border: 1px solid var(--bb-line); border-radius: 12px;
    padding: 20px 22px; box-shadow: 0 6px 20px rgba(34, 28, 25, .05);
}
.guide-article .cols2 .card h4 { font-family: var(--font-display); font-size: 1.18rem; color: var(--bb-ink); margin-bottom: 8px; font-style: italic; font-weight: 500; }
.guide-article .cols2 .card p { font-size: 0.94rem; }

/* ---- misc ---- */
.guide-article .note-inline { font-size: 0.86rem; color: var(--bb-taupe); font-style: italic; margin-top: 6px; }
.guide-article .big-stat { font-family: var(--font-display); font-size: 2.6rem; color: var(--bb-gold-deep); line-height: 1; }
.guide-article .disclaimer { font-size: 0.76rem; line-height: 1.55; color: var(--bb-taupe); margin-top: 16px; max-width: 720px; }

/* ---- guide hero download row ---- */
.guide-hero-note {
    font-family: var(--font-body); font-size: 0.8rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bb-taupe); margin-top: 14px;
}

/* ---- sticky-ish download strip above CTA ---- */
.guide-dl-strip { background: var(--bb-blush-soft); padding: 34px 0; text-align: center; }
.guide-dl-strip p { color: var(--bb-ink-soft); font-weight: 300; margin-bottom: 16px; }


/* ============================================================
   CHAPTER-CONTRAST OVERHAUL (2026-07-06 review feedback)
   Every section must read as a distinct chapter at a glance.
   ============================================================ */

.guide-article .g-sec {
    padding: 84px 0 72px;
    position: relative;
    border-top: 1px solid var(--bb-line);
}
/* alternate section planes: cream → white → blush → repeat */
.guide-article .g-sec:nth-of-type(3n+1) { background: var(--bb-cream); }
.guide-article .g-sec:nth-of-type(3n+2) { background: var(--bb-white); }
.guide-article .g-sec:nth-of-type(3n)   { background: var(--bb-blush-soft); }

/* oversized watermark chapter numeral */
.guide-article .section-num {
    font-family: var(--font-display);
    font-size: clamp(4rem, 9vw, 6.5rem);
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(194, 160, 91, 0.55);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    font-weight: 500;
}

/* chapter title gets a gold accent bar + more presence */
.guide-article h2.title {
    font-size: clamp(2.1rem, 4.6vw, 3rem);
    padding-top: 18px;
    position: relative;
}
.guide-article h2.title::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 3px;
    background: linear-gradient(90deg, var(--bb-gold), var(--bb-gold-deep));
    border-radius: 2px;
}
.guide-article .subtitle {
    font-size: 1.12rem;
    margin-bottom: 34px;
}

/* callouts pop harder against the plane */
.guide-article .callout {
    box-shadow: 0 10px 30px rgba(34, 28, 25, 0.06);
    border-radius: 14px;
    padding: 24px 28px;
}
.guide-article .callout.dark { box-shadow: 0 14px 38px rgba(34, 28, 25, 0.22); }
.guide-article .g-sec:nth-of-type(3n+2) .callout { background: var(--bb-blush-soft); }

/* download strip becomes a hard visual break */
.guide-dl-strip {
    background: var(--bb-ink);
    padding: 52px 0;
}
.guide-dl-strip p { color: rgba(248, 243, 235, 0.85); font-size: 1.05rem; }


/* ---- image plates (photo slots — swap in generated images) ---- */
.guide-article .plate { margin: 18px 0 24px; }
.guide-article .plate .plate-slot {
    min-height: 260px; border-radius: 16px; border: 1.5px dashed var(--bb-gold);
    display: grid; place-items: center; text-align: center; padding: 22px;
    background: repeating-linear-gradient(135deg, rgba(229,207,166,.16), rgba(229,207,166,.16) 14px, rgba(247,233,224,.5) 14px, rgba(247,233,224,.5) 28px);
    color: var(--bb-taupe); font-size: 0.86rem; line-height: 1.6;
}
.guide-article .plate img { width: 100%; display: block; border-radius: 16px; }
.guide-article .plate .plate-cap {
    font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--bb-taupe); padding: 9px 2px 0;
}