/* Juniper Family Guide — sample brand site
   Synthetic demo for Altiv.AI play testing (SEO-C13 E-E-A-T, Page C).
   A commercial product round-up: named author, Article JSON-LD, working
   author link — but NO Person JSON-LD on the author, testing CLAIMED and
   not demonstrated (no dates, scoring sheet, photos, or raw observations),
   and an affiliate disclosure placed weakly (after the first recommendation).
   Trust here is still to be earned. */

:root {
  --jn-coral:      #E4573D;
  --jn-coral-dark: #C23E27;
  --jn-coral-pale: #FCEAE4;
  --jn-green:      #3E7C59;
  --jn-green-pale: #E6F0EA;
  --jn-ink:        #2A2521;
  --jn-slate:      #5C544C;
  --jn-slate-lt:   #938A80;
  --jn-mist:       #EBE4DC;
  --jn-cream:      #FBF7F1;
  --jn-white:      #FFFFFF;
  --jn-gold:       #D9A441;

  --jn-font:         "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jn-font-display: "Fraunces", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--jn-font);
  color: var(--jn-ink);
  background: var(--jn-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--jn-coral-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--jn-coral); }

.jn-container { max-width: 940px; margin: 0 auto; padding: 0 22px; }
.jn-narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* ── Header ── */
.jn-header { background: var(--jn-cream); border-bottom: 1px solid var(--jn-mist); padding: 16px 0; }
.jn-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.jn-brand { font-family: var(--jn-font-display); font-size: 23px; font-weight: 700; color: var(--jn-green); text-decoration: none; }
.jn-brand:hover { text-decoration: none; }
.jn-brand-mark {
  display: inline-block; background: var(--jn-coral); color: white;
  width: 30px; height: 30px; border-radius: 50%; text-align: center;
  font-weight: 800; margin-right: 9px; line-height: 30px; font-size: 16px;
  font-family: var(--jn-font);
}
.jn-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.jn-nav a { color: var(--jn-slate); font-weight: 600; font-size: 14px; text-decoration: none; }
.jn-nav a:hover { color: var(--jn-coral); }

/* ── Article header ── */
.jn-article-header { padding: 40px 0 24px; }
.jn-cat { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 800; color: var(--jn-coral); margin-bottom: 12px; }
.jn-title { font-family: var(--jn-font-display); font-size: 40px; font-weight: 700; line-height: 1.14; color: var(--jn-ink); margin-bottom: 16px; }
.jn-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--jn-slate); }
.jn-byline-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--jn-green); color: white; font-weight: 800; font-size: 13px;
}
.jn-byline a { color: var(--jn-green); font-weight: 700; }

/* ── Body ── */
.jn-article { padding: 12px 0 52px; }
.jn-article h2 { font-family: var(--jn-font-display); font-size: 27px; font-weight: 700; color: var(--jn-ink); margin: 32px 0 12px; }
.jn-article h3 { font-size: 20px; font-weight: 800; color: var(--jn-green); margin: 24px 0 8px; }
.jn-article p { font-size: 17px; color: var(--jn-slate); margin-bottom: 16px; }
.jn-article ol, .jn-article ul { margin: 0 0 18px 22px; }
.jn-article li { font-size: 17px; color: var(--jn-slate); margin-bottom: 8px; }
.jn-lede { font-size: 19px; color: var(--jn-ink); margin-bottom: 22px; }

/* ranked product list */
.jn-rank { border: 1px solid var(--jn-mist); border-radius: 14px; padding: 20px 22px; margin: 18px 0; background: var(--jn-white); }
.jn-rank-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.jn-rank-num {
  font-family: var(--jn-font-display); font-size: 26px; font-weight: 700; color: var(--jn-coral);
  background: var(--jn-coral-pale); width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.jn-rank-name { font-size: 19px; font-weight: 800; color: var(--jn-ink); }
.jn-rank-verdict { font-size: 16px; color: var(--jn-slate); margin-bottom: 8px; }
.jn-badge { display: inline-block; font-size: 12px; font-weight: 800; color: var(--jn-green); background: var(--jn-green-pale); border-radius: 6px; padding: 3px 9px; }
.jn-buy { display: inline-block; font-weight: 700; font-size: 14px; margin-top: 6px; }

/* weak affiliate disclosure (deliberately below first recommendation) */
.jn-affiliate {
  background: var(--jn-cream); border: 1px dashed var(--jn-slate-lt);
  border-radius: 10px; padding: 12px 16px; margin: 16px 0 24px;
  font-size: 13px; color: var(--jn-slate);
}

/* generic + profile pages */
.jn-page { padding: 44px 0 52px; }
.jn-page h1 { font-family: var(--jn-font-display); font-size: 36px; color: var(--jn-ink); margin-bottom: 18px; }
.jn-page h2 { font-family: var(--jn-font-display); font-size: 24px; color: var(--jn-ink); margin: 28px 0 12px; }
.jn-page p { font-size: 17px; color: var(--jn-slate); margin-bottom: 16px; }
.jn-page ul { margin: 0 0 18px 22px; }
.jn-page li { font-size: 17px; color: var(--jn-slate); margin-bottom: 8px; }

.jn-profile-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.jn-profile-photo {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--jn-green); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; flex-shrink: 0;
}
.jn-profile-name { font-family: var(--jn-font-display); font-size: 30px; color: var(--jn-ink); }
.jn-profile-role { font-size: 16px; color: var(--jn-green); font-weight: 700; }
.jn-fiction-tag {
  display: inline-block; font-size: 12px; color: var(--jn-slate);
  background: var(--jn-cream); border: 1px solid var(--jn-mist);
  border-radius: 6px; padding: 6px 12px; margin: 12px 0;
}
.jn-note { background: var(--jn-coral-pale); border-radius: 10px; padding: 16px 18px; margin: 20px 0; font-size: 15px; color: var(--jn-coral-dark); }

/* ── Footer ── */
.jn-footer { background: var(--jn-ink); color: var(--jn-slate-lt); padding: 34px 0; font-size: 13px; }
.jn-footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.jn-footer a { color: #E8B9AC; }
.jn-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.jn-disclosure { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; line-height: 1.7; }

@media (max-width: 720px) {
  .jn-title { font-size: 30px; }
  .jn-nav { display: none; }
  .jn-footer-inner { flex-direction: column; }
}