/* ==========================================================================
   Jade Journal — shared styles
   Aligned to CI (docs/designbook.html): EB Garamond @400 for display,
   Inter for body/labels; 80px section rhythm; 1rem/1.8 body; wide-tracked
   uppercase eyebrows; gold accents; 2px radius.
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */
.j-hero {
    background: var(--jade-deep);
    color: var(--white);
    padding: 96px 40px 84px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.j-hero::after {
    content: '';
    position: absolute;
    top: -140px; right: -140px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(74,124,106,.28) 0%, transparent 70%);
    pointer-events: none;
}
.j-hero-inner { max-width: 680px; margin: 0 auto; position: relative; }
.j-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.j-hero h1 {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.2;
    letter-spacing: .02em;
    margin: 22px 0 24px;
}
.j-hero h1 em { font-style: italic; font-weight: 400; color: var(--jade-light); }
.j-hero-lede {
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255,255,255,.62);
    line-height: 1.65;
    max-width: 500px;
    margin: 0 auto;
}
.j-hero-lede strong { color: rgba(255,255,255,.9); font-weight: 500; }

/* Prose ------------------------------------------------------------------- */
.j-prose { padding: 80px 40px; background: var(--white); }
.j-prose-inner { max-width: 660px; margin: 0 auto; }
.j-lead {
    font-size: 1.08rem;
    color: var(--grey-700);
    line-height: 1.8;
    margin: 0 0 56px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--grey-200);
}
.j-prose section { margin-bottom: 56px; }
.j-prose section:last-child { margin-bottom: 0; }
.j-prose h2 {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 1.9rem;
    color: var(--grey-900);
    line-height: 1.25;
    margin: 0 0 18px;
}
.j-prose h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jade-medium);
    margin: 24px 0 10px;
}
.j-prose p { color: var(--grey-600); line-height: 1.8; margin: 0 0 16px; font-size: 1rem; }
.j-prose ul { color: var(--grey-600); line-height: 1.7; margin: 0 0 16px; padding-left: 20px; }
.j-prose li { margin-bottom: 10px; }
.j-prose strong { color: var(--grey-900); font-weight: 600; }
.j-pull {
    border-left: 2px solid var(--gold);
    padding: 4px 0 4px 24px;
    margin: 32px 0;
    font-family: 'EB Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--jade-deep);
}

/* Two-track --------------------------------------------------------------- */
.j-twotrack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.j-track { border: 1px solid var(--grey-200); border-radius: 2px; padding: 28px; background: var(--jade-whisper); }
.j-track h3 { margin: 0 0 10px; }
.j-track p { margin: 0; }
@media (max-width: 640px){ .j-twotrack { grid-template-columns: 1fr; } }

/* Draft / legal banner ---------------------------------------------------- */
.j-draft { border: 1px solid var(--gold); background: #fdf9f0; border-radius: 2px; padding: 18px 22px; margin: 28px 0; }
.j-draft .tag { display: block; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: #8a6d2f; font-weight: 600; margin-bottom: 8px; }
.j-draft p { font-size: .92rem; margin: 0; color: var(--grey-500); line-height: 1.7; }

/* FAQ --------------------------------------------------------------------- */
.j-faq { background: var(--jade-whisper); padding: 80px 40px; }
.j-faq-inner { max-width: 660px; margin: 0 auto; }
.j-faq h2 { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 2rem; color: var(--grey-900); margin: 8px 0 40px; }
.j-faq-item { border-top: 1px solid var(--grey-200); padding: 26px 0; }
.j-faq-item:last-child { border-bottom: 1px solid var(--grey-200); }
.j-faq-q { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--grey-900); margin: 0 0 10px; }
.j-faq-a { color: var(--grey-600); line-height: 1.8; margin: 0; font-size: .98rem; }

/* Byline ------------------------------------------------------------------ */
.j-byline { max-width: 660px; margin: 0 auto; padding: 48px 40px 0; color: var(--grey-400); font-size: .85rem; line-height: 1.8; }
.j-byline .author { color: var(--grey-700); font-weight: 600; }

/* CTA --------------------------------------------------------------------- */
.j-cta { text-align: center; padding: 88px 40px; background: var(--white); }
.j-cta h2 { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 1.9rem; color: var(--grey-900); margin: 0 0 14px; }
.j-cta p { color: var(--grey-500); margin: 0 0 28px; font-size: 1rem; }
.j-cta a { display: inline-block; background: var(--jade-deep); color: var(--white); text-decoration: none; padding: 16px 40px; border-radius: 2px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

/* Method + Sources (trust block) ------------------------------------------ */
.j-method { background: var(--jade-whisper); padding: 56px 40px; border-top: 1px solid var(--grey-200); }
.j-method-inner { max-width: 660px; margin: 0 auto; }
.j-method h2 { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 1.5rem; color: var(--grey-900); margin: 0 0 8px; }
.j-method > .j-method-inner > p { color: var(--grey-600); line-height: 1.8; font-size: .95rem; margin: 0 0 20px; }
.j-method ol { list-style: none; counter-reset: step; padding: 0; margin: 0 0 20px; }
.j-method ol li { counter-increment: step; position: relative; padding: 0 0 14px 34px; color: var(--grey-600); line-height: 1.7; font-size: .92rem; }
.j-method ol li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid var(--jade-light); border-radius: 50%; color: var(--jade-medium); font-size: .68rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.j-method ol li strong { color: var(--grey-900); }
.j-method-status { font-size: .88rem; color: var(--grey-500); border-left: 2px solid var(--jade-light); padding: 6px 0 6px 16px; margin: 0; line-height: 1.7; }
.j-sources { background: var(--white); padding: 56px 40px 72px; }
.j-sources-inner { max-width: 660px; margin: 0 auto; }
.j-sources h2 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--jade-medium); margin: 0 0 20px; }
.j-sources ul { list-style: none; padding: 0; margin: 0; }
.j-sources li { padding: 12px 0; border-top: 1px solid var(--grey-200); color: var(--grey-600); font-size: .9rem; line-height: 1.6; }
.j-sources li:last-child { border-bottom: 1px solid var(--grey-200); }
.j-sources a { color: var(--jade-medium); text-decoration: none; }
.j-sources a:hover { text-decoration: underline; }
.j-sources .src-note { color: var(--grey-400); font-size: .82rem; margin-top: 16px; line-height: 1.6; }

/* Journal index ----------------------------------------------------------- */
.j-list { padding: 80px 40px; background: var(--white); }
.j-list-inner { max-width: 720px; margin: 0 auto; }
.j-list-intro { color: var(--grey-500); line-height: 1.8; max-width: 600px; margin: 0 0 48px; font-size: .95rem; }
.j-entry { display: block; text-decoration: none; border-top: 1px solid var(--grey-200); padding: 32px 0; transition: padding-left .2s ease; }
.j-entry:last-of-type { border-bottom: 1px solid var(--grey-200); }
.j-entry:hover { padding-left: 8px; }
.j-entry-kicker { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--jade-medium); }
.j-entry-title { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 1.6rem; color: var(--grey-900); line-height: 1.25; margin: 10px 0 8px; }
.j-entry-desc { color: var(--grey-500); line-height: 1.75; margin: 0; font-size: .95rem; }
.j-soon { color: var(--grey-400); font-size: .85rem; margin-top: 44px; }