/*
Theme Name: FaceSage
Theme URI: https://facesage.app
Description: Marketing + content site for FaceSage — read anyone's face. Portrait Journal: ivory, jade, editorial typography, and a consistent browser reading experience.
Author: FaceSage
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: All rights reserved
Text Domain: facesage
*/

:root {
  --ink: #14111c;
  --ink-2: #1e1a2a;
  --panel: #241f33;
  --panel-2: #35304a;
  --line: #4a4363;
  --gold: #d3a95c;
  --gold-deep: #b8973a;
  --cream: #f6f1e6;
  --cream-card: #fffdf8;
  --cream-2: #e9e1cf;
  --muted: #8f889e;
  --ink-soft: #4b4658;
  --text: #221f2b;
  --maxw: 1080px;
  --radius: 18px;
  --shadow: 0 18px 50px -22px rgba(20, 17, 28, 0.45);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 17, 28, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(211, 169, 92, 0.18);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; color: var(--cream); letter-spacing: .2px; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: radial-gradient(120% 120% at 30% 20%, var(--gold) 0%, var(--gold-deep) 55%, #7a5f26 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--cream-2); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--gold); text-decoration: none; }
@media (max-width: 640px) { .nav a.hide-sm { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 650; font-size: 17px; padding: 15px 26px; border-radius: 999px;
  border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  font-family: var(--sans);
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #201803; box-shadow: 0 12px 28px -12px rgba(211,169,92,.7);
}
.btn-gold:hover { transform: translateY(-1px); text-decoration: none; box-shadow: 0 16px 34px -12px rgba(211,169,92,.85); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(246,241,230,.35); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(90% 120% at 80% -10%, rgba(211,169,92,.22) 0%, rgba(211,169,92,0) 55%),
    radial-gradient(70% 90% at 10% 10%, rgba(88,80,140,.35) 0%, rgba(88,80,140,0) 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--cream);
  padding: 72px 0 86px;
  border-bottom: 1px solid rgba(211,169,92,.16);
}
.hero .eyebrow {
  display: inline-block; font-family: var(--serif); font-style: italic;
  color: var(--gold); font-size: 17px; margin-bottom: 18px; letter-spacing: .3px;
  padding: 7px 15px; border: 1px solid rgba(211,169,92,.32); border-radius: 999px;
  background: rgba(211,169,92,.07);
}
.hero h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.5px;
  font-size: clamp(38px, 7vw, 66px); line-height: 1.04; margin: 0 0 20px;
}
.hero h1 .accent { color: var(--gold); }
.hero .lede { font-size: clamp(18px, 2.4vw, 22px); color: var(--cream-2); max-width: 620px; margin: 0 0 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .fine { margin-top: 20px; color: var(--muted); font-size: 15px; }
.hero .fine strong { color: var(--cream-2); font-weight: 600; }

/* waitlist form */
.waitlist { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; }
.waitlist input[type=email] {
  flex: 1 1 240px; min-width: 0; padding: 15px 18px; border-radius: 999px;
  border: 1px solid rgba(246,241,230,.28); background: rgba(255,255,255,.06);
  color: var(--cream); font-size: 16px; font-family: var(--sans);
}
.waitlist input[type=email]::placeholder { color: rgba(246,241,230,.5); }
.waitlist input[type=email]:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
.waitlist .hp { position: absolute; left: -9999px; }
.joined-note {
  margin-top: 16px; padding: 13px 18px; border-radius: 14px;
  background: rgba(88,168,140,.14); border: 1px solid rgba(88,168,140,.45);
  color: #bfe7d6; font-size: 16px; display: inline-block;
}
.badge-soon {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px;
  border-radius: 14px; border: 1px solid rgba(246,241,230,.22);
  background: rgba(255,255,255,.04); color: var(--cream-2); font-size: 15px;
}
.badge-soon .apple { font-size: 20px; }

/* ---------- Sections ---------- */
section { padding: 72px 0; }
section.tint { background: var(--cream-card); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.section-head .kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 700; color: var(--gold-deep); }
.section-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; margin: 12px 0 12px; color: var(--ink); }
.section-head p { color: var(--ink-soft); font-size: 18px; margin: 0; }

/* feature cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--cream-card); border: 1px solid rgba(74,67,99,.14);
  border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow);
}
section.tint .card { background: var(--cream); }
.card .ic { width: 46px; height: 46px; border-radius: 50%; background: rgba(211,169,92,.13); display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; margin-bottom: 14px; }
.card .ic img.emoji { width: 22px !important; height: 22px !important; }
.card h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 8px; color: var(--ink); font-weight: 600; }
.card p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 8px; }
.step .n {
  counter-increment: step; font-family: var(--serif); font-size: 15px; font-weight: 700;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  color: var(--gold-deep); border: 1.5px solid rgba(211,169,92,.5); margin-bottom: 16px;
}
.step .n::before { content: counter(step); }
.step h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; color: var(--ink); font-weight: 600; }
.step p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* honesty band */
.band { background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%); color: var(--cream); }
.band .inner { max-width: 760px; margin: 0 auto; text-align: center; }
.band h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 4vw, 36px); margin: 0 0 16px; }
.band h2 .accent { color: var(--gold); }
.band p { color: var(--cream-2); font-size: 18px; margin: 0 auto 14px; max-width: 640px; }

/* final CTA */
.finalcta { text-align: center; }
.finalcta .inner { background: linear-gradient(160deg, var(--panel-2) 0%, var(--ink-2) 100%); color: var(--cream); border-radius: 26px; padding: 56px 28px; box-shadow: var(--shadow); }
.finalcta h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 42px); margin: 0 0 14px; }
.finalcta p { color: var(--cream-2); margin: 0 auto 26px; max-width: 520px; }
.finalcta .waitlist, .finalcta .cta-row { justify-content: center; margin-left: auto; margin-right: auto; }

/* ---------- Article / legal pages ---------- */
.page-hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--cream); padding: 54px 0 40px; border-bottom: 1px solid rgba(211,169,92,.16); }
.page-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 5vw, 46px); margin: 0; }
.page-hero .crumb { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.page-hero .crumb a { color: var(--cream-2); }
.prose { padding: 48px 0 72px; }
.prose h2 { font-family: var(--serif); font-size: 26px; margin: 40px 0 10px; color: var(--ink); }
.prose h3 { font-family: var(--serif); font-size: 21px; margin: 30px 0 8px; color: var(--ink); }
.prose p { margin: 0 0 16px; color: #37333f; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 0 0 9px; color: #37333f; }
.prose a { color: var(--gold-deep); text-decoration: underline; }

/* blog list */
.postlist { display: grid; gap: 22px; }
.post-card { background: var(--cream-card); border: 1px solid rgba(74,67,99,.14); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.post-card h2 { font-family: var(--serif); margin: 0 0 8px; font-size: 24px; }
.post-card h2 a { color: var(--ink); }
.post-card .meta { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.post-card p { margin: 0; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream-2); padding: 48px 0 40px; border-top: 1px solid rgba(211,169,92,.16); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; align-items: flex-start; }
.site-footer .brand { margin-bottom: 12px; }
.site-footer .tag { color: var(--muted); font-size: 15px; max-width: 320px; }
.site-footer .foot-community { font-family: var(--serif); color: var(--cream); font-size: 16px; margin: 22px 0 0; font-weight: 600; }
.site-footer .foot-social { margin-top: 8px; font-size: 15px; }
.site-footer .foot-social a { display: inline-flex; align-items: center; gap: 7px; color: var(--cream-2); }
.site-footer .foot-social svg { width: 17px; height: 17px; }
.site-footer .foot-social a:hover { color: var(--gold); text-decoration: none; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.site-footer nav a { color: var(--cream-2); font-size: 15px; }
.site-footer nav a:hover { color: var(--gold); text-decoration: none; }
.site-footer .legalrow { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(246,241,230,.1); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.site-footer .disclaim { max-width: 640px; }

/* Brand logo image (replaces .mark dot + text) */
.brand-logo { height: 65px; width: auto; display: block; }
.site-footer .brand-logo { height: 60px; }
@media (max-width: 640px) { .brand-logo { height: 46px; } }

/* footer heart */
.heart { color: var(--gold); }

/* ---------- Trust band (homepage) ---------- */
.trustband { background: var(--ink); border-bottom: 1px solid rgba(211,169,92,.16); padding: 18px 0; }
.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 40px; align-items: start; max-width: 1100px; margin-inline: auto; }
.trust-item { display: flex; align-items: center; gap: 12px; color: var(--cream-2); }
.trust-item .t-ic { font-size: 20px; }
.trust-item strong { display: block; color: var(--cream); font-size: 15px; }
.trust-item span:not(.t-ic) { font-size: 13px; color: #a8a1b7; line-height: 1.45; }

/* ---------- Creature archetypes (homepage) ---------- */
.creatures { padding: 64px 0; }
.houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 28px; }
.house { border: 1px solid rgba(211,169,92,.25); border-radius: 14px; padding: 18px 16px; text-align: center; background: rgba(211,169,92,.05); }
.house .h-el { font-family: var(--serif); font-size: 20px; color: #8a6a2a; margin-bottom: 6px; }
.house .h-c { font-size: 15px; color: #35304a; font-weight: 500; }
.creatures .mythic { text-align: center; margin-top: 22px; color: #5d5648; font-size: 15px; }
.creatures .mythic strong { color: #8a6a2a; }

/* five-card row */
.cards-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .cards-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards-5 { grid-template-columns: 1fr; } }

/* ---------- chart promo band ---------- */
.chartpromo { background: var(--ink); padding: 44px 0; border-top: 1px solid rgba(211,169,92,.16); border-bottom: 1px solid rgba(211,169,92,.16); }
.chartpromo .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.chartpromo h2 { font-family: var(--serif); color: var(--cream); margin: 0 0 8px; font-size: 28px; }
.chartpromo p { color: var(--cream-2); margin: 0; max-width: 560px; font-size: 16px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(20,17,28,.12); padding: 6px 0; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 19px; color: var(--ink); padding: 12px 0; list-style-position: outside; }
.faq summary:hover { color: #8a6a2a; }
.faq details p { color: var(--ink-soft); font-size: 16px; margin: 0 0 14px; }
.faq details a { color: #8a6a2a; }

/* ---------- blog list ---------- */
.bloglist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
@media (max-width: 640px) { .bloglist { grid-template-columns: 1fr; } }
.blogitem { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--cream); border: 1px solid rgba(211,169,92,.3); border-radius: 14px; padding: 18px 20px; }
.blogitem:hover { text-decoration: none; border-color: var(--gold); }
.blogitem h3 { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--ink); font-weight: 600; }
.blogitem .more { color: #8a6a2a; font-size: 14px; white-space: nowrap; }

/* ---------- Conversion homepage (2026-07-15 rebuild) ---------- */

/* hero split: copy left, live app right */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-shot { margin-top: 34px; } }
.hero-shot { display: flex; flex-direction: column; align-items: center; }
.phone {
  width: min(340px, 82vw); border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, #2e2841 0%, #1a1626 100%);
  border: 1px solid rgba(211,169,92,.35);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.75), 0 0 60px -18px rgba(211,169,92,.25);
}
.phone img { border-radius: 34px; }
.phone-sm { width: min(300px, 78vw); }
.shot-note { margin-top: 14px; color: var(--muted); font-size: 14px; font-style: italic; }

/* problem moments */
.cards.moments { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cards.moments { grid-template-columns: 1fr; } }
.moments .card h3 { color: #8a6a2a; }
.turn { text-align: center; max-width: 620px; margin: 38px auto 0; color: var(--ink); font-family: var(--serif); font-size: 20px; }

/* dark-band kicker */
.kicker-light { text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }

/* sample reading */
.sample-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; max-width: 920px; margin: 0 auto; }
@media (max-width: 820px) { .sample-grid { grid-template-columns: 1fr; justify-items: center; } }
.sample-quotes .sq-title { font-family: var(--serif); font-size: 26px; color: var(--ink); margin-bottom: 18px; }
.sample-quotes blockquote {
  margin: 0 0 16px; padding: 14px 20px; border-left: 3px solid var(--gold);
  background: var(--cream); border-radius: 0 14px 14px 0;
  color: #37333f; font-size: 17px; line-height: 1.55;
}
.sq-note { color: var(--ink-soft); font-size: 15px; margin: 20px 0 24px; }

/* testimonials (renders only when facesage_testimonials() has entries) */
/* Gold wash: distinct from the FAQ's cream-card below AND the creatures
   section's body-cream above (the page only alternated two tones). */
.testis { background: rgba(211,169,92,.10); }
.testis .testi { background: var(--cream-card); }
.testi-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.testi-grid .testi { flex: 0 1 calc((100% - 40px) / 3); min-width: 260px; }
@media (max-width: 860px) { .testi-grid .testi { flex-basis: 100%; } }
.testi {
  background: var(--cream); border: 1px solid rgba(74,67,99,.14); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
}
.testi p { margin: 0; color: #37333f; font-size: 16px; line-height: 1.6; flex: 1; }
.testi .who { display: flex; align-items: center; gap: 12px; }
.testi .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi .who strong { display: block; color: var(--ink); font-size: 15px; }
.testi .who span { color: var(--muted); font-size: 13px; }

/* footer blog links */
.site-footer .blogcol h4 { font-family: var(--serif); color: var(--cream); font-size: 16px; margin: 0 0 10px; font-weight: 600; }
.site-footer .blogcol { max-width: 320px; }
.site-footer .blogcol a { display: block; color: var(--cream-2); font-size: 14px; margin-bottom: 8px; }
.site-footer .blogcol a:hover { color: var(--gold); text-decoration: none; }

/* hero phone 20% smaller (user-set 2026-07-15) */
.hero-shot .phone { width: min(272px, 66vw); }

/* contact form (/contact/) */
.contact-form { display: grid; gap: 18px; max-width: 560px; margin-top: 10px; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form label { display: block; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.contact-form label .opt { font-weight: 400; color: #6f6a7a; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(20,17,28,.18); background: var(--cream-card);
  font: inherit; font-size: 16px; color: var(--ink);
}
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(211,169,92,.22);
}
.contact-sent {
  background: var(--cream-card); border: 1px solid rgba(211,169,92,.5);
  border-radius: 14px; padding: 18px 20px; margin: 10px 0 18px; color: var(--ink);
}
.contact-err {
  background: #fbeeec; border: 1px solid rgba(160,60,45,.35);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; color: #7a3427; font-size: 15px;
}

/* blog search (dark page-hero) */
.blog-search { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 460px; }
.blog-search input[type=search] {
  flex: 1; min-width: 200px; padding: 11px 16px; border-radius: 12px;
  border: 1px solid rgba(246,241,230,.22); background: rgba(255,255,255,.07);
  color: var(--cream); font: inherit; font-size: 16px;
}
.blog-search input[type=search]::placeholder { color: rgba(246,241,230,.5); }
.blog-search input[type=search]:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
.blog-search .btn { padding: 11px 20px; }

/* blog category pills (dark page-hero) */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cat-pills a {
  padding: 6px 15px; border-radius: 999px; font-size: 14px;
  border: 1px solid rgba(246,241,230,.25); color: var(--cream-2);
}
.cat-pills a:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.cat-pills a.on { background: var(--gold); border-color: var(--gold); color: #241a06; font-weight: 600; }

/* in-list app CTA on the blog index */
.post-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--ink-2) 100%);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
}
.post-cta h3 { font-family: var(--serif); color: var(--cream); margin: 0 0 6px; font-size: 22px; }
.post-cta p { margin: 0; color: var(--cream-2); font-size: 15px; max-width: 440px; }

/* single post: reading time + related */
.postmeta { color: var(--muted); font-size: 14px; margin-top: 12px; }
.related { padding-top: 0; }
.related h2 { font-family: var(--serif); font-size: 26px; color: var(--ink); margin: 0 0 18px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .rel-grid { grid-template-columns: 1fr; } }
.rel-card {
  display: flex; flex-direction: column; background: var(--cream-card); border: 1px solid rgba(74,67,99,.14);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.rel-card:hover { border-color: var(--gold); text-decoration: none; }
.rel-card .rel-thumb { display: block; }
.rel-card .rel-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rel-card .rel-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.rel-card h3 { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--ink); }
.rel-card .rel-ex { color: var(--muted); font-size: 14px; line-height: 1.55; }
.rel-card .meta { color: var(--muted); font-size: 13px; margin-top: auto; }

/* buttons must win over contextual link styles (.prose a etc.) everywhere */
a.btn, .prose a.btn, .related a.btn { text-decoration: none; }
a.btn-gold, .prose a.btn-gold { color: #201803; }
a.btn-ghost, .prose a.btn-ghost { color: var(--cream); }

/* featured photo on posts + blog cards */
.postcover { padding: 10px 0 0; }
.post-cover, .postcover img { width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(211,169,92,.3); display: block; }
.postcover + .prose { padding-top: 22px; }
.post-card .card-thumb img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(211,169,92,.25); display: block; margin-bottom: 12px; }

/* mid-article CTA (injected at ~1/3 of single posts, functions.php facesage_mid_cta) */
.fs-cta-mid { margin: 36px 0; padding: 22px 26px; }
.fs-cta-mid h3 { font-size: 20px; }
.fs-cta-mid p { font-size: 14.5px; }
.fs-cta-mid .btn { white-space: nowrap; font-size: 16px; padding: 13px 22px; }
.fs-cta-end { margin-top: 40px; padding: 22px 26px; }
.fs-cta-end h3 { font-size: 20px; }
.fs-cta-end p { font-size: 14.5px; }
.fs-cta-end .btn { white-space: nowrap; font-size: 16px; padding: 13px 22px; }

/* web-CTA note under the main button (2026-07-18, web-first launch) */
.cta-note { margin-top: 10px; font-size: 13.5px; color: rgba(239, 230, 212, 0.55); }
.post-cta .btn, .cta-row .btn { text-decoration: none; }


/* ---------- pricing page (2026-07-24) ---------- */
.page-hero .ph-lede { color: var(--cream-2); font-size: 18px; margin: 14px 0 0; max-width: 620px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; } }
.price-card { display: flex; flex-direction: column; position: relative; padding: 30px 26px; }
.price-card h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.price-figure { font-family: var(--serif); font-size: 38px; color: var(--ink); line-height: 1; }
.price-figure span { font-size: 17px; color: var(--ink-soft); font-family: var(--sans); }
.price-sub { color: var(--ink-soft); font-size: 15px; margin: 6px 0 16px; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.price-list li { padding: 7px 0 7px 26px; position: relative; color: #37333f; font-size: 15.5px; border-bottom: 1px solid rgba(20,17,28,.07); }
.price-list li:last-child { border-bottom: 0; }
.price-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--gold-deep); font-weight: 700; }
.price-list em { color: var(--ink-soft); font-style: normal; font-size: 14px; }
.price-btn { text-align: center; }
.price-best { border-color: rgba(211,169,92,.55); box-shadow: 0 18px 40px -18px rgba(211,169,92,.45); }
.price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); color: #241c06; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.price-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 26px 0 0; }
.btn-ghost.price-btn { color: var(--ink); border-color: rgba(20,17,28,.25); }
.btn-ghost.price-btn:hover { color: var(--gold-deep); border-color: var(--gold-deep); }


/* --- Featured on band --- */
.featured-on { background: var(--ink); padding: 34px 0 32px; border-bottom: 1px solid rgba(211,169,92,.16); }
.fo-label { margin: 0 0 18px; text-align: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(246,241,230,.44); }
.fo-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 26px; max-width: 1180px; margin-inline: auto; }
.fo-logo { height: auto; flex: none; opacity: .78; filter: invert(1) brightness(.92); transition: opacity .18s ease; }
.fo-logos:hover .fo-logo { opacity: .5; }
.fo-logo:hover { opacity: 1; }
@media (max-width: 900px) { .fo-logos { gap: 16px 28px; } .fo-logo { transform: scale(.86); } }
@media (max-width: 560px) { .fo-logos { gap: 14px 22px; } .fo-logo { transform: scale(.74); } }
@media (max-width: 820px) { .trust-items { grid-template-columns: 1fr; max-width: 480px; } }
@media (prefers-reduced-motion: reduce) { .fo-logo { transition: none; } }


/* --- trust facts inside the light 'Measured, not made up' section --- */
.trust-on-tint { margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(20,17,28,.10); }
.trust-on-tint .trust-item { color: var(--ink-soft); }
.trust-on-tint .trust-item strong { color: var(--ink); }
.trust-on-tint .trust-item span:not(.t-ic) { color: #5b5569; }

/* ---- Author entity (2026-08-17): byline, author box, author archive ---- */
.byline a { color: var(--cream); font-weight: 600; }
.byline .dot { opacity: .55; margin: 0 2px; }
.authorbox { display: flex; gap: 18px; align-items: flex-start; margin: 44px 0 8px; padding: 22px 24px; background: var(--cream-card); border: 1px solid var(--cream-2); border-radius: var(--radius); }
.authorbox-avatar { flex: 0 0 auto; }
.authorbox-img { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.authorbox-body { min-width: 0; }
.authorbox-kicker { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.authorbox-name { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 2px 0 6px; }
.authorbox-name a { color: var(--ink); text-decoration: none; }
.authorbox-name a:hover { color: var(--gold-deep); }
.authorbox-role { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 6px; }
.authorbox-bio { margin: 0 0 10px; color: #37333f; font-size: 15px; line-height: 1.6; }
.authorbox-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.authorbox-links a { color: var(--gold-deep); font-weight: 600; }
@media (max-width: 560px) { .authorbox { flex-direction: column; gap: 12px; } }
.author-hero { display: flex; gap: 22px; align-items: center; }
.author-hero-img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); flex: 0 0 auto; }
.author-hero h1 { margin: 0; }
.author-posts { padding-top: 8px; }
.author-posts .pagination { margin-top: 24px; }
@media (max-width: 560px) { .author-hero { flex-direction: column; align-items: flex-start; } .author-hero-img { width: 96px; height: 96px; } }
.authorbox-role { display: inline-block; white-space: nowrap; }
@media (max-width: 560px) { .authorbox-role { display: block; margin-left: 0; margin-top: 2px; } }
.authorbox-bio { margin-bottom: 0; }
.authorbox-more { color: var(--gold-deep); font-weight: 600; white-space: nowrap; }

/* ---- On-site SEO layer (2026-08-17) ---- */
.starthere { padding: 64px 0; }
.starthere-cards .card { text-decoration: none; display: block; }
.starthere-cards .card:hover h3 { color: var(--gold-deep); }
.starthere-more { text-align: center; margin: 26px 0 0; color: var(--ink-soft); }
.starthere-more a { color: var(--gold-deep); }
.pillarcol a { display: block; }
.hub { padding: 40px 0 0; }
.hub-intro { color: var(--ink-soft); font-size: 18px; margin: 0 0 30px; }
.hub-cluster { padding: 22px 0; border-top: 1px solid rgba(20,17,28,.1); }
.hub-cluster h2 { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; }
.hub-cluster h2 a { color: var(--ink); text-decoration: none; }
.hub-cluster h2 a:hover { color: var(--gold-deep); }
.hub-cluster p { color: var(--ink-soft); margin: 0 0 12px; }
.hub-cluster ul { columns: 2; column-gap: 28px; margin: 0 0 8px; padding-left: 20px; }
.hub-cluster li { margin: 0 0 7px; break-inside: avoid; }
.hub-cluster li a, .hub-more { color: var(--gold-deep); }
.postlist-title { font-family: var(--serif); font-size: 26px; margin: 10px 0 18px; color: var(--ink); }
.tool-hero { padding: 26px 0 8px; }
.fs-tool { background: var(--panel); color: var(--cream); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); }
.fs-tool-head h2 { font-family: var(--serif); font-size: 26px; margin: 0 0 8px; color: var(--cream); }
.fs-tool-head p { margin: 0 0 18px; color: var(--cream-2, #e8e2d6); }
.fs-tool-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.fs-tool-form label { display: block; }
.fs-tool-form label > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.fs-tool-form input[type=text] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink); color: var(--cream); font-size: 16px; }
.fs-tool-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fs-tool-file { position: relative; }
.fs-tool-drop { display: block; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--gold); color: var(--gold); cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.fs-tool-go { white-space: nowrap; }
.fs-tool-fine { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.fs-tool-slots { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.fs-slot { width: 84px; height: 84px; border-radius: 50%; border: 1px dashed var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 14px; }
.fs-plus { color: var(--muted); font-size: 22px; }
.landing-copy { background: var(--cream); color: var(--text); padding: 56px 0 72px; }
.landing-copy h2 { color: var(--ink); }
.landing-copy p, .landing-copy li { color: #37333f; }
.landing-copy a { color: var(--gold-deep); }
body.fs-embedded .landing-copy { flex: none; }
@media (max-width: 720px) { .fs-tool-form { grid-template-columns: 1fr; } .hub-cluster ul { columns: 1; } }


/* ---------- Article tables v2 (2026-08-25) ----------
   v1 forced min-width + nowrap, which pushed the table wider than the article
   column: the first column clipped and the last column ran off the edge.
   v2 fits the column, gives the prose cell the space, and only scrolls when
   the viewport genuinely cannot hold it. */
.fs-table-wrap{
	margin:2rem 0;
	border:1px solid rgba(74,67,99,.18);
	border-radius:12px;
	background:var(--cream-card);
	box-shadow:0 8px 24px -18px rgba(20,17,28,.35);
	overflow:hidden;               /* rounded corners clip cleanly; no scroll needed at desktop */
}
.fs-table{
	width:100%;
	table-layout:fixed;            /* honour the column widths below */
	border-collapse:collapse;
	font-family:var(--sans);
	font-size:.95rem;
	line-height:1.5;
	color:var(--text);
}
/* 1st = the feature, 2nd = the reading (gets the room), 3rd = a short label */
.fs-table th:first-child,.fs-table td:first-child{width:26%}
.fs-table th:last-child,.fs-table td:last-child{width:17%}
.fs-table thead th{
	background:rgba(211,169,92,.14);
	color:var(--ink);
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.07em;
	text-transform:uppercase;
	text-align:left;
	padding:.8rem 1rem;
	border-bottom:2px solid var(--gold);
}
.fs-table td,.fs-table tbody th{
	padding:.8rem 1rem;
	border-bottom:1px solid rgba(74,67,99,.12);
	vertical-align:top;
	overflow-wrap:anywhere;        /* long words break instead of forcing overflow */
	white-space:normal;            /* kills the v1 nowrap that caused the clipping */
}
.fs-table tbody th[scope=row]{
	font-weight:650;
	color:var(--ink);
	text-align:left;
}
.fs-table tbody tr:last-child td,.fs-table tbody tr:last-child th{border-bottom:none}
.fs-table tbody tr:nth-child(even){background:rgba(246,241,230,.5)}
.fs-table tbody tr:hover{background:rgba(211,169,92,.08)}
.fs-table .fs-t-last{font-size:.82rem;color:var(--ink-soft)}
@media (max-width:700px){
	.fs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
	.fs-table{table-layout:auto;font-size:.88rem;min-width:32rem}
	.fs-table th:first-child,.fs-table td:first-child,
	.fs-table th:last-child,.fs-table td:last-child{width:auto}
	.fs-table thead th,.fs-table td,.fs-table tbody th{padding:.6rem .75rem}
}

/* two-column article tables (feature -> meaning): the 3-col widths above
   squeeze the first column, so scope those and give 2-col its own split. */
.fs-table:not(:has(th:nth-child(3))) th:first-child,
.fs-table:not(:has(th:nth-child(3))) td:first-child{width:32%}
.fs-table:not(:has(th:nth-child(3))) th:last-child,
.fs-table:not(:has(th:nth-child(3))) td:last-child{width:68%}

/* Blog post header spacing (2026-10-16): tighter hero, divider centred between byline and cover */
body.single-post .page-hero { padding: 40px 0 28px; }
body.single-post .postcover { padding-top: 28px; }
@media (max-width: 760px) {
  body.single-post .page-hero { padding: 30px 0 22px; }
  body.single-post .postcover { padding-top: 22px; }
}
/* Blog post end spacing (2026-10-16): author box to "Keep reading", and cards to footer */
body.single-post section.prose { padding-bottom: 36px; }
body.single-post section.related { padding-bottom: 56px; }
/* App pages (2026-10-16): the app bundle carries a bare "header{margin-bottom:26px}" from its old shell; keep it off the site header */
body.fs-embedded .site-header { margin-bottom: 0; }
/* Homepage portrait (2026-10-16): no caption, no motion toggle */
body .journal-portrait figcaption { display: none; }

/* 2026-10-16: article heading alignment (H2 centered, H3 left) */
section.prose h2 { text-align: center; }
section.prose h3 { text-align: left; }

/* 2026-10-16: CTA box keeps the button beside the text on desktop, full-width under it on phones */
.post-cta > div { flex: 1 1 320px; min-width: 0; }
.post-cta .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .post-cta .btn { width: 100%; text-align: center; } }

/* 2026-10-16: "Free Face Reading" always visible in the sticky header, on phones too. Hidden on keyword landing pages and on the free reading page itself. */
.hdr-cta{display:none}
@media(max-width:760px){
.site-header .hdr-cta{display:inline-flex;align-items:center;margin-left:auto;background:var(--ink);color:var(--cream);border:1px solid var(--ink);border-radius:3px;padding:9px 12px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none}
.site-header .hdr-cta:hover{color:var(--cream);text-decoration:none}
.site-header .menu-toggle{padding-left:12px}
.site-header .menu-toggle>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:400px){.site-header .brand{font-size:25px}.site-header .brand .journal-mark{width:30px;height:30px}.site-header .hdr-cta{padding:8px 10px;font-size:13px}}
.fs-is-landing .nav-cta,.fs-is-landing .hdr-cta,.page-id-332 .hdr-cta{display:none!important}