/* ============================================================
   THE PRIMAL ORACLE — animal profile pages (/animals/{slug}/)
   Uses oracle.css tokens. Editorial, generous, mobile-first.
   ============================================================ */

.pf-wrap{max-width:820px; margin:0 auto; padding:0 22px}
.pf-hero{text-align:center; padding:56px 0 30px}
.pf-cross{display:inline-flex; align-items:center; gap:12px; color:var(--muted); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; flex-wrap:wrap; justify-content:center}
.pf-cross b{color:var(--brass)} .pf-cross .g{color:var(--brass-bright); font-size:1.1rem}
.pf-sigil{width:120px; height:120px; margin:0 auto 20px; display:block}
.pf-name{font-family:var(--serif); font-size:clamp(3rem,10vw,5.6rem); color:var(--moon); line-height:1; margin:0}
.pf-essence{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,3.4vw,1.7rem); color:var(--brass-bright); max-width:34ch; margin:16px auto 0}
.pf-tags{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.pf-tag{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:.82rem; color:var(--ivory)}
.pf-tag .k{color:var(--muted)}
.pf-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px}

.pf-section{padding:30px 0; border-top:1px solid var(--line)}
.pf-section h2{font-family:var(--serif); font-size:1.9rem; color:var(--moon); margin:0 0 6px}
.pf-eyebrow{font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin:0 0 14px}
.pf-section p{color:var(--body); margin:0 0 14px; line-height:1.7}
.pf-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.pf-list li{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; color:var(--body)}

.pf-gates{display:grid; gap:14px}
.pf-gate{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.pf-gate h3{font-family:var(--serif); font-size:1.3rem; color:var(--brass-bright); margin:0 0 6px}
.pf-gate .lab{font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px}
.pf-gate p{margin:0}

.pf-grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:640px){.pf-grid2{grid-template-columns:1fr}}
/* hub tile = a lit surface, not a flat slab: panel gradient +
   accent corner bloom, hairline brightens + soft inner glow on hover */
.pf-card{position:relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft,rgba(214,193,140,.14)), transparent 46%),
    linear-gradient(165deg, var(--panel-2,var(--panel2,#1b1e33)), var(--panel,#151728) 55%);
  border:1px solid var(--line); border-radius:14px; padding:20px 22px;
  transition:border-color .3s ease, box-shadow .3s ease}
.pf-card::before{content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg, transparent, var(--accent-soft,rgba(214,193,140,.14)) 30%, var(--accent-soft,rgba(214,193,140,.14)) 70%, transparent);
  pointer-events:none}
.pf-card:hover,.pf-card:focus-within{border-color:var(--accent,var(--brass,#d6c18c));
  box-shadow:inset 0 0 20px var(--accent-soft,rgba(214,193,140,.14))}
.pf-card h3{font-family:var(--serif); color:var(--moon); font-size:1.25rem; margin:0 0 10px}
.pf-chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.pf-chips li{background:var(--field-bg); border:1px solid var(--line); color:var(--brass-bright); border-radius:999px; padding:8px 14px; font-size:.9rem}
.pf-chips li small{display:block; color:var(--muted); font-size:.72rem}

.pf-stones{display:grid; gap:12px}
.pf-stone{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px}
.pf-stone .role{grid-column:1; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); align-self:center}
.pf-stone .nm{grid-column:2; font-family:var(--serif); font-size:1.15rem; color:var(--moon)}
.pf-stone .why{grid-column:1 / -1; color:var(--body); font-size:.92rem}
.pf-stone .care{grid-column:1 / -1; color:var(--muted); font-size:.8rem}

.pf-links{display:flex; flex-wrap:wrap; gap:10px}
.pf-links a{border:1px solid var(--line); border-radius:999px; padding:9px 15px; color:var(--brass-bright); text-decoration:none; font-size:.9rem}
.pf-links a:hover{border-color:var(--brass)}
.pf-note{color:var(--muted); font-size:.82rem; margin-top:10px}

.pf-unopened{text-align:center; padding:60px 0}
.pf-unopened p{max-width:52ch; margin:14px auto}

footer.pf-foot{padding:50px 0 90px; border-top:1px solid var(--line); margin-top:50px; color:var(--muted); font-size:.86rem; text-align:center}
.pf-disc{font-size:.78rem; color:#7c7d92; max-width:64ch; margin:14px auto 0}

.acct-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:14px;padding:16px 20px;margin:26px 0 0}
.acct-cta p{margin:0;color:var(--body);font-size:.92rem}
.acct-cta a{white-space:nowrap}

@media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto} }

/* ---- flagship 30-section additions ---- */
.pf-explore{background:linear-gradient(180deg, rgba(214,193,140,.06), rgba(20,23,43,.25)); border:1px solid var(--line,#2a2c44); border-radius:16px; padding:26px}
.pf-sharecard{border:1px solid var(--brass,#d6c18c); border-radius:16px; padding:26px; text-align:center; background:rgba(214,193,140,.05)}
.pf-shareline{font-family:var(--serif,serif); font-size:1.5rem; line-height:1.35; color:var(--moon,#f5ecd2); margin:6px 0 18px}
@media(max-width:560px){ .pf-shareline{font-size:1.25rem} }

/* ===== Phase 6: continue-your-descent mesh ===== */
.pf-descent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,4vw,44px);margin:36px 0}
.pf-descent-cluster{min-width:0}
.pf-descent-head{font-family:var(--sans,inherit);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-bright,var(--brass,#d6c18c));margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line,#2a2c44)}
.pf-descent-cards{display:flex;flex-direction:column;gap:2px}
.pf-descent-card{display:block;padding:9px 10px;border-radius:10px;text-decoration:none;transition:background .18s ease,transform .18s ease}
.pf-descent-card:hover,.pf-descent-card:focus-visible{background:var(--accent-soft,rgba(214,193,140,.1));transform:translateX(2px)}
.pf-descent-name{display:block;font-family:var(--serif,Georgia,serif);font-size:1.05rem;color:var(--moon,#f5ecd2);line-height:1.25}
.pf-descent-sub{display:block;font-size:.8rem;color:var(--muted,#9a9bb0);margin-top:2px}
.pf-descent-more{margin-top:10px}
.pf-descent-more summary{cursor:pointer;font-size:.8rem;color:var(--muted,#9a9bb0)}
.pf-descent-more summary:hover{color:var(--accent-bright,var(--brass,#d6c18c))}
.pf-descent-all{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.pf-descent-all a{font-size:.82rem;color:var(--body,#c9cadb);text-decoration:none}
.pf-descent-all a:hover{color:var(--accent-bright,var(--brass,#d6c18c))}
@media (prefers-reduced-motion: reduce){.pf-descent-card{transition:none}.pf-descent-card:hover{transform:none}}