/* ============================================================
   REDESIGN LAYER v2 — freepersonalitytest.online
   Additive; loaded AFTER the host styles.css (Jul-6). Reversible: remove file + <link>.
   Owner decision (2026-07-23): WARM brand wins over the host's Jul-6 cooler direction.
   Spec: redesign/02-design-system.md
   ============================================================ */
:root{
  --page:#FBF2E2; --warm-white:#fffaf0;
  --border-cool:#c4d2dd;
  --aqua:#4f9e9c; --aqua-deep:#3c7c7a; --aqua-soft:#dbeceb;
  --coral:#c9786e; --coral-deep:#b0605a; --coral-soft:#f2ddd9;
  --success:#397c67; --warning:#aa7630; --danger:#a65353;
  --gold-ink:#875a12;   /* darker gold for small label text — WCAG AA on cream */
  --r-sm:12px; --r-lg:20px;
  --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px; --s-11:88px; --s-15:120px;
}

/* ===== REBASE: warm content + a DISTINCT DARK header (its own element) ===== */
/* Top menu = navy bar with dimmed-white text + gold hairline, bookending the
   navy footer. Reads as separate chrome, not blended into the cream page. */
header.site{
  background:linear-gradient(180deg,#20374f,#1a2c43);
  border-bottom:1px solid rgba(216,184,115,.40);
  box-shadow:0 12px 30px -14px rgba(18,28,44,.55);
  backdrop-filter:none;
}
header.site.is-scrolled{
  background:linear-gradient(180deg,#1c3048,#16273b);
  border-bottom-color:rgba(216,184,115,.55);
  box-shadow:0 16px 36px -16px rgba(18,28,44,.65);
}
header.site .brand,
header.site .brand .wordmark{ color:#eef3f9 }
header.site .brand .dom{ color:var(--gold-light) }
header.site .nav-links a{ color:#d7e1ec; opacity:.85 }
header.site .nav-links a:hover,
header.site .nav-links a:focus-visible,
header.site .nav-links a[aria-current="page"]{ color:#fff; opacity:1 }
header.site .nav-links a::after{ background:var(--gold-light) }
/* Logo mark: gold chip + navy monogram so it reads as intentional on the navy bar */
header.site .brand .mark{
  background:linear-gradient(150deg,#e6c882,#b8862e) !important;
  color:#1b2c48 !important;
  box-shadow:0 6px 16px rgba(10,14,22,.5), inset 0 0 0 1px rgba(255,255,255,.5) !important;  /* v6: gray drop, not golden */
  font-size:1.5rem !important;      /* bigger "fp" monogram inside the chip */
  font-weight:700 !important;
  letter-spacing:0 !important;
}
@media(max-width:880px){                                     /* mobile pills on the dark bar */
  header.site .nav-links a{ background:rgba(255,255,255,.07); border-color:rgba(216,184,115,.32); color:#e7edf4 }
}
/* (host's animated typewriter brand kept — now reads light on navy) */

/* ===== Distinct surfaces so components separate from the page ===== */
/* "Direct answer" / callout boxes: clean WHITE card that lifts off the light-gray page */
.answer-block{
  background:#FBF2E2;
  border-color:rgba(184,134,46,.30);
  box-shadow:0 14px 36px -24px rgba(60,44,18,.20);
}

/* ===== LIGHT page + BEIGE cards (owner: only these elements beige, NOT whole page) ===== */
body{ background-color:#f4f6f8 !important; background-image:none !important }
body::before{ display:none !important }
.alt{ background:#ffffff !important; border-top:1px solid rgba(28,43,72,.06) !important; border-bottom:1px solid rgba(28,43,72,.06) !important }
/* Cards + callouts are the warm BEIGE elements that pop on the light page */
.info-card, .ten-list, .dossier{
  background:#FBF2E2 !important;
  border:1px solid rgba(184,134,46,.28) !important;
  box-shadow:0 16px 42px -26px rgba(60,44,18,.22) !important;
}
.info-card:hover{ border-color:rgba(184,134,46,.55) !important }
.trait{ border-bottom-color:rgba(184,134,46,.20) }
.trait:hover{ background:#f6ecd6 }

/* --- Vertical rhythm (§4.3) --- */
section{padding:96px 0}
.hero{padding:72px 0 92px}
@media(max-width:880px){ section{padding:64px 0} .hero{padding:44px 0 60px} }

/* --- HERO: premium raster Inner-Map illustration replaces the flat inline SVG --- */
.scene img{display:block;width:100%;height:auto}
.hero-figure{
  position:relative; margin:0;
  border:1px solid rgba(216,184,115,.42);
  border-radius:22px; overflow:hidden;
  box-shadow:34px 34px 70px rgba(60,44,18,.16);
  background:linear-gradient(180deg,#fdfaf3,#f4ead6);
}
.hero-figure picture{display:block}
.hero-figure .frame{
  position:absolute; inset:0; border-radius:22px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(216,184,115,.55),
             inset 0 0 0 7px rgba(251,245,233,.30),
             inset 0 0 0 8px rgba(156,111,32,.26);
}
@media(min-width:881px){ .hero-grid{grid-template-columns:1fr 1.1fr; gap:60px} }

/* --- PROCESS illustration band (§13.2) --- */
.process-figure{
  position:relative; margin:8px 0 40px;
  border:1px solid rgba(216,184,115,.38);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--soft-shadow);
  background:linear-gradient(180deg,#fdfaf3,#f4ead6);
}
.process-figure .frame{
  position:absolute; inset:0; border-radius:var(--r-lg); pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(216,184,115,.45);
}
#how .path{margin-top:8px}

/* --- Restrained Inner-Map accents (cool secondary = aqua) --- */
.hero .trust i{background:var(--aqua)}
.lead h2::after{background:linear-gradient(90deg,var(--aqua),transparent)}
.eyebrow{color:var(--gold-ink)}                        /* AA-compliant label */
.ten-list .trait:nth-child(9) .gauge i,
.ten-list .trait:nth-child(10) .gauge i{background:linear-gradient(90deg,var(--aqua-deep),var(--aqua))}

/* --- Reading width (§4.2) --- */
.content{max-width:68ch}
.hero-figure:focus-within{outline:none}

/* --- Page-hero split: copy + category illustration (hubs + articles) --- */
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:900px){ .page-hero-grid{grid-template-columns:1.08fr .92fr;gap:52px} }
.ph-copy{min-width:0}
.ph-copy .answer-block{max-width:none}
.ph-art{position:relative;margin:0;border:1px solid rgba(216,184,115,.42);border-radius:20px;overflow:hidden;box-shadow:var(--soft-shadow);background:linear-gradient(180deg,#fdfaf3,#f4ead6)}
.ph-art img{display:block;width:100%;height:auto}
.ph-art .frame{position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(216,184,115,.5)}
@media(max-width:899px){ .ph-art{max-width:560px} }

/* ============================================================
   v6 — owner refinements (2026-07-24)
   ============================================================ */
/* Gold buttons: neutral GRAY drop shadow (owner: not golden/yellow). Chip handled above. */
.btn-gold{
  box-shadow:0 8px 20px rgba(10,14,22,.42), inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
/* Brand wordmark gets a subtle dark shadow for depth on the navy bar (owner request) */
header.site .brand .wordmark,
header.site .brand .dom{ text-shadow:0 1px 2px rgba(0,0,0,.5) }

/* Body/paragraph copy fully BLACK — on the light page AND on the beige cards
   (owner request; descriptions/paragraphs only, headings & labels keep their color) */
.content p, .content li,
.info-card p, .dossier p, .ds,
.ten-list p, .answer-block, .answer-block p,
.lead p, .lead li{ color:#000 !important }