/* ==========================================================================
   Family History Quick Start — design system
   Palette drawn from the site's own leaf photography and archival paper tones.
   ========================================================================== */

:root{
  --parchment:      #FAF7EE;
  --parchment-deep: #EFE6CE;
  --cream:          #FFFEFB;
  --fern:           #2B4331;
  --fern-deep:      #1E3123;
  --fern-tint:      #E7EEE4;
  --meadow:         #3F6B3A;
  --brass:          #8C6A2C;
  --brass-tint:     #F1E6C9;
  --clay:           #9C4E33;
  --ink:            #2A2822;
  --ink-soft:       #514E45;
  --border:         rgba(43,67,49,.16);
  --border-strong:  rgba(43,67,49,.32);
  --shadow-card:    0 1px 2px rgba(38,36,32,.06);
  --radius-sm:      4px;
  --radius-md:      8px;
  --max-width:      1120px;
  --measure:        68ch;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--fern); text-decoration-color:rgba(43,67,49,.4); text-underline-offset:3px; }
a:hover{ color:var(--meadow); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--fern-deep);
  line-height:1.18;
  font-weight:600;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.1rem, 3.4vw + 1rem, 3.25rem); font-weight:600; }
h2{ font-size:clamp(1.5rem, 1.6vw + 1rem, 2.05rem); }
h3{ font-size:1.3rem; }
h4{ font-size:1.08rem; }
p{ margin:0 0 1.15em; }
ul,ol{ padding-left:1.35em; margin:0 0 1.15em; }
li{ margin-bottom:.4em; }
blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.2em;
  border-left:3px solid var(--brass);
  font-family:var(--font-display); font-style:italic;
  color:var(--ink-soft); font-size:1.12em;
}
hr{ border:none; border-top:1px solid var(--border); margin:2.2em 0; }
table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.96em; }
/* Two-column "resource" tables (thumbnail + description) get a card-like treatment
   instead of a dense data-grid look, and stack cleanly on mobile. */
.prose table:has(td > p > img){ border:none; }
.prose table:has(td > p > img) tr{ display:flex; gap:1.4rem; align-items:flex-start; border-bottom:1px solid var(--border); padding:1.1rem 0; }
.prose table:has(td > p > img) td{ border:none; padding:0; }
.prose table:has(td > p > img) td:first-child{ flex:none; width:140px; }
.prose table:has(td > p > img) td:first-child img{ border-radius:var(--radius-sm); }
@media (max-width:560px){
  .prose table:has(td > p > img) tr{ flex-direction:column; gap:.6rem; }
  .prose table:has(td > p > img) td:first-child{ width:110px; }
}
table caption{ text-align:left; font-weight:600; margin-bottom:.5em; }
th,td{ text-align:left; padding:.65em .8em; border-bottom:1px solid var(--border); vertical-align:top; }
thead th{ font-family:var(--font-display); color:var(--fern-deep); border-bottom:2px solid var(--border-strong); }
tbody tr:hover{ background:rgba(43,67,49,.035); }
code{ background:var(--fern-tint); padding:.1em .35em; border-radius:3px; font-size:.9em; }

.container{ max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--fern); color:#fff;
  padding:.6em 1em; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--parchment); border-bottom:1px solid var(--border);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.9rem 0;
}
.wordmark{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:1.28rem;
  color:var(--fern-deep); text-decoration:none; white-space:nowrap;
}
.wordmark svg{ flex:none; }
.wordmark:hover{ color:var(--fern-deep); }
.wordmark .sub{ display:block; font-family:var(--font-body); font-weight:400; font-size:.62rem;
  letter-spacing:.04em; color:var(--ink-soft); margin-top:-.1em; }

.primary-nav{ display:flex; align-items:center; gap:1.7rem; }
.primary-nav a{
  color:var(--ink); text-decoration:none; font-size:.97rem; font-weight:500;
  padding:.3em 0; border-bottom:2px solid transparent;
}
.primary-nav a:hover{ border-bottom-color:var(--brass); color:var(--fern-deep); }
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.icon-btn{
  border:1px solid var(--border-strong); background:var(--cream); border-radius:50%;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--fern-deep); cursor:pointer;
}
.icon-btn:hover{ background:var(--fern-tint); }
.nav-toggle{ display:none; border:1px solid var(--border-strong); background:var(--cream);
  border-radius:6px; width:40px; height:38px; align-items:center; justify-content:center; cursor:pointer; }

@media (max-width: 860px){
  .primary-nav{
    position:fixed; inset:60px 0 0 0; background:var(--parchment);
    flex-direction:column; align-items:flex-start; gap:0; padding:1rem 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    border-top:1px solid var(--border);
  }
  .primary-nav.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .primary-nav a{ width:100%; padding:.85em 0; border-bottom:1px solid var(--border); }
  .nav-toggle{ display:flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; padding:.72em 1.35em;
  border-radius:var(--radius-sm); font-weight:700; text-decoration:none; font-size:.98rem;
  border:1.5px solid transparent; cursor:pointer; line-height:1.2;
}
.btn-primary{ background:var(--fern); color:var(--parchment); }
.btn-primary:hover{ background:var(--fern-deep); color:var(--parchment); }
.btn-outline{ background:transparent; border-color:var(--fern); color:var(--fern-deep); }
.btn-outline:hover{ background:var(--fern); color:var(--parchment); }
.btn-brass{ background:var(--brass); color:#2a2115; }
.btn-brass:hover{ background:#84651f; color:#fff; }
.btn-on-photo{ background:var(--cream); color:var(--fern-deep); }
.btn-on-photo:hover{ background:#fff; }

/* ---------- Hero (home) ----------
   The dark green band is a fixed-height decorative strip (::before), decoupled
   from the card's own height, so the card can visually spill onto the page's
   parchment background beneath it rather than the two edges lining up flush. */
.hero{ position:relative; background:transparent; }
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:calc(min(34vw, 300px) + 46px);
  background:var(--fern-deep);
}
.hero__photo-frame{
  position:relative; overflow:hidden;
  width:100%; height:min(34vw, 300px); min-height:220px;
}
.hero__photo{
  position:absolute; top:-12%; left:0;
  width:100%; height:124%; object-fit:cover;
  display:block; opacity:.94;
}
.hero__card{
  position:relative; margin:-150px auto 0; max-width:760px;
  background:var(--cream); border:1px solid var(--brass);
  outline:1px solid var(--cream); outline-offset:-6px;
  padding:2.3rem 3rem 2.6rem; border-radius:2px;
  box-shadow:0 18px 40px rgba(30,49,35,.22);
}
.hero__card .eyebrow{ font-family:var(--font-display); font-style:italic; color:var(--brass); margin:0 0 .3em; font-size:1rem;}
.hero__card h1{ margin-bottom:.4rem; font-size:clamp(2.1rem, 2.4vw + 1rem, 2.85rem); }
.hero__card p{ color:var(--ink-soft); margin-bottom:1.4rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:640px){
  .hero::before{ height:calc(min(50vw, 240px) + 34px); }
  .hero__photo-frame{ height:min(50vw, 240px); min-height:180px; }
  .hero__card{ margin:-90px 20px 0; padding:1.5rem 1.4rem 1.7rem; }
}

/* ---------- Section rhythm ---------- */
.section{ padding:4.2rem 0; }
.section--tight{ padding:2.6rem 0; }
.section--band{ background:var(--fern); color:var(--parchment); }
.section--band h2, .section--band h3{ color:var(--parchment); }
.section--sand{ background:var(--parchment-deep); }
.section-head{ max-width:640px; margin-bottom:2.2rem; }
.section-head p{ color:var(--ink-soft); }

/* Leaf-branch divider motif — the one recurring signature element */
.branch-divider{ display:flex; justify-content:center; margin:0 0 2.4rem; color:var(--brass); }
.branch-divider svg{ width:120px; height:auto; }

/* ---------- Quick-start paths (ledger-style triptych) ---------- */
.paths{
  display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border-strong);
}
.paths__item{
  padding:1.9rem 1.8rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit; display:block;
}
.paths__item:nth-child(3n){ border-right:none; }
.paths__item:hover .paths__title{ color:var(--meadow); }
.paths__num{ font-family:var(--font-display); color:var(--brass); font-size:1rem; margin-bottom:.5em; display:block; }
.paths__title{ font-family:var(--font-display); font-size:1.12rem; color:var(--fern-deep); margin-bottom:.35em; font-weight:600; }
.paths__desc{ color:var(--ink-soft); font-size:.94rem; margin:0; }
@media (max-width:760px){
  .paths{ grid-template-columns:1fr; }
  .paths__item{ border-right:none; }
}

/* ---------- CTA band ---------- */
.cta-band{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2{ margin:0; max-width:34ch; }

/* ---------- Course list (legit numbered sequence) ---------- */
.course-list{ list-style:none; margin:0; padding:0; counter-reset:lesson; }
.course-list li{
  counter-increment:lesson; display:flex; gap:1.1rem; padding:1.15rem 0;
  border-bottom:1px solid var(--border); margin:0;
}
.course-list li::before{
  content:counter(lesson); font-family:var(--font-display); color:var(--brass);
  border:1.5px solid var(--brass); border-radius:50%; width:2.1rem; height:2.1rem;
  display:flex; align-items:center; justify-content:center; flex:none; font-size:1rem;
}
.course-list a{ font-weight:600; text-decoration:none; }
.course-list a:hover{ text-decoration:underline; }
.course-list p{ margin:.25em 0 0; color:var(--ink-soft); font-size:.95rem; }

/* ---------- Post / article cards ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{ text-decoration:none; color:inherit; display:block; }
.post-card__img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); margin-bottom:.9rem; background:var(--parchment-deep); }
.post-card__cat{ font-size:.76rem; font-weight:700; color:var(--meadow); }
.post-card__title{ font-family:var(--font-display); font-size:1.12rem; color:var(--fern-deep); margin:.3em 0; }
.post-card:hover .post-card__title{ color:var(--meadow); }
.post-card__excerpt{ color:var(--ink-soft); font-size:.93rem; margin:0; }

/* ---------- Article / page layout ---------- */
.page-hero{ padding:2.6rem 0 1rem; }
.breadcrumb{ font-size:.86rem; color:var(--ink-soft); margin-bottom:.9rem; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ margin:0 .4em; opacity:.6; }
.article-meta{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.6rem 0 0; }
.tag-pill{
  display:inline-block; background:var(--fern-tint); color:var(--fern-deep);
  border-radius:99px; padding:.28em .85em; font-size:.78rem; font-weight:600;
}
.byline{ color:var(--ink-soft); font-size:.9rem; }
.article-featured{ margin:1.8rem 0 0; border-radius:var(--radius-md); overflow:hidden; }
.prose{
  max-width:var(--measure);
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:2.5rem clamp(1.25rem, 4vw, 3.1rem);
  box-shadow:var(--shadow-card);
}
.prose img{ border-radius:var(--radius-md); margin:.4em 0 1.4em; }
.article-wrap{ display:grid; grid-template-columns:1fr; gap:2.4rem; padding:1.4rem 0 4rem; }
.tags-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin:2.4rem 0 0; }
.tags-row a{
  text-decoration:none; color:var(--ink-soft); border:1px solid var(--border-strong);
  border-radius:99px; padding:.3em .9em; font-size:.82rem;
}
.tags-row a:hover{ border-color:var(--fern); color:var(--fern-deep); }
.next-step{
  margin:3rem 0 0; padding:1.9rem 2rem; background:var(--fern-tint); border-radius:var(--radius-md);
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.next-step h3{ margin:0 0 .2rem; }
.next-step p{ margin:0; color:var(--ink-soft); }

/* ---------- Legal pages ---------- */
.legal .prose{ max-width:74ch; }
.legal h2{ margin-top:1.7em; padding-top:.2em; }
.legal ol{ counter-reset:clause; }
.updated-box{
  display:inline-block; font-size:.86rem; color:var(--ink-soft); background:var(--parchment-deep);
  padding:.5em 1em; border-radius:var(--radius-sm); margin-bottom:1.6rem;
}

/* ---------- Generic content page ---------- */
.content-page .prose{ max-width:var(--measure); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--fern-deep); color:#E9E4D3; margin-top:4rem; }
.site-footer a{ color:#E9E4D3; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem;
  padding:3.4rem 0 2.4rem; border-bottom:1px solid rgba(233,228,211,.15);
}
.footer-grid h4{ color:#fff; font-size:.92rem; margin-bottom:.9rem; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:.55em; font-size:.92rem; }
.footer-about p{ color:#C9C3AE; font-size:.92rem; max-width:34ch; }
.footer-wordmark{ font-family:var(--font-display); font-size:1.25rem; color:#fff; margin-bottom:.6rem; display:block; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem;
  padding:1.3rem 0; font-size:.83rem; color:#B7B198;
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; background:rgba(30,49,35,.55); display:none;
  align-items:flex-start; justify-content:center; padding:8vh 1.2rem; z-index:300;
}
.search-overlay.is-open{ display:flex; }
.search-panel{ background:var(--cream); width:100%; max-width:640px; border-radius:var(--radius-md); padding:1.4rem; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.search-panel input{
  width:100%; font-size:1.1rem; padding:.7em .9em; border:1.5px solid var(--border-strong);
  border-radius:6px; font-family:var(--font-body); background:#fff; color:var(--ink);
}
.search-results{ margin-top:1rem; max-height:50vh; overflow:auto; }
.search-results a{ display:block; padding:.7em .3em; border-bottom:1px solid var(--border); text-decoration:none; }
.search-results a:hover{ background:var(--fern-tint); }
.search-hint{ color:var(--ink-soft); font-size:.85rem; margin-top:.8rem; }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}