/* ============================================================================
   FAMILY OBSERVATORY : INTERIOR PAGE + PROSE + FORMS + LEGAL
   Depends on tokens.css + base.css. v1.0.0 : 2026-07-10
   ========================================================================== */

/* ---- Page hero (compact, for interior pages) -------------------------- */
.page-hero { position:relative; overflow:hidden; background:
    radial-gradient(700px 360px at 90% -20%, var(--brand-soft), transparent 60%),
    var(--bg); border-bottom:1px solid var(--border); }
.page-hero-inner { max-width:var(--container-lg); margin-inline:auto; padding:clamp(var(--space-7),6vw,var(--space-9)) var(--gutter); }
/* Split hero: text + photo (every interior hero carries an image) */
.page-hero-inner:has(.page-hero-media) { display:grid; grid-template-columns:1.06fr 0.94fr; gap:clamp(2rem,5vw,4rem); align-items:center; max-width:var(--container-xl); }
.page-hero-media { position:relative; }
.page-hero-photo { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--brand-soft); }
.page-hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.page-hero-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(46,110,98,0.20), rgba(224,160,74,0.08) 60%); mix-blend-mode:soft-light; }
@media (max-width:820px){ .page-hero-inner:has(.page-hero-media){ grid-template-columns:1fr; } }
.page-hero .eyebrow { margin-bottom:var(--space-3); }
.page-hero h1 { font-size:clamp(2.2rem,5vw,var(--fs-5xl)); margin-bottom:var(--space-4); max-width:20ch; }
.page-hero .lead { max-width:60ch; }
.breadcrumb { font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--space-5); }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--brand); }

/* ---- Prose (long-form readable) --------------------------------------- */
.prose { max-width:68ch; }
.prose h2 { font-size:var(--fs-2xl); margin-top:var(--space-7); }
.prose h3 { font-size:var(--fs-xl); margin-top:var(--space-6); }
.prose p, .prose li { font-size:var(--fs-base); color:var(--text-2); line-height:var(--lh-body); }
.prose ul, .prose ol { padding-left:1.3em; display:grid; gap:var(--space-2); margin-bottom:var(--space-5); }
.prose strong { color:var(--text); }
.prose .answer { font-size:var(--fs-lg); color:var(--text); font-weight:500; border-left:3px solid var(--brand); padding-left:var(--space-4); margin-bottom:var(--space-5); }

/* ---- Disclaimer / legal callout --------------------------------------- */
.legal-box { border:1px solid var(--border-strong); background:var(--surface-2); border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); margin:var(--space-6) 0; }
.legal-box.strong { border-color:#e0c3a0; background:var(--accent-soft); }
.legal-box .lb-title { display:flex; align-items:center; gap:var(--space-2); font-weight:700; color:var(--text); margin:0 0 var(--space-2); }
.legal-box .lb-title svg { color:var(--accent-strong); flex:none; }
.legal-box p { font-size:var(--fs-sm); color:var(--text-2); margin:0 0 var(--space-2); }
.legal-box p:last-child { margin-bottom:0; }
.review-flag { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-soft); border:1px solid #e0c3a0; padding:4px 10px; border-radius:var(--radius-pill); margin-bottom:var(--space-4); }

/* ---- Forms (contact / early access) ----------------------------------- */
.form-wrap { max-width:var(--container-sm); }
.form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(var(--space-5),4vw,var(--space-7)); }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:600px){ .form-row2{ grid-template-columns:1fr; } }
.form-status { display:none; border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5); font-weight:600; }
.form-status.is-visible { display:block; }
.form-status--ok { background:var(--ok-soft); color:#1c5a3f; border:1px solid #bfe0cf; }
.form-status--err { background:var(--help-soft); color:#96331f; border:1px solid #e6b3a5; }

/* ---- Simple 2-3 col layout for interior content ----------------------- */
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; }
.cols-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-5); }
@media (max-width:820px){ .cols-2{ grid-template-columns:1fr; } }

/* ---- 404 -------------------------------------------------------------- */
.notfound { text-align:center; padding:clamp(var(--space-8),12vw,var(--space-10)) var(--gutter); }
.notfound .code { font-family:var(--font-display); font-size:clamp(4rem,14vw,8rem); color:var(--brand); line-height:1; }