/* ============================================================ ANIMAL PROFILE — shared chassis for all 144 Zodi Animal pages Load order: animal-profile.css → animal-components.css → animal-responsive.css (+ animal-print.css media="print"). Per-animal theming happens ONLY via --animal-* custom props set inline on . JS-off baseline: every section fully visible and readable. ============================================================ */ :root{ --a-night:#0d0e18; /* site ink */ --a-deep:#090a12; /* darker band */ --a-snow:#ece7d8; /* ivory text */ --a-gold:#d6c18c; /* brass: shared interactive accent */ --a-mist:#adaec2; /* muted text — min contrast for content */ --a-slate:#5a5b70; /* decorative labels ONLY (low contrast) */ --serif:"Fraunces",Georgia,serif; --sans:"Geist",system-ui,-apple-system,sans-serif; --mono:"Space Mono","SFMono-Regular",monospace; --han:"Ma Shan Zheng",serif; --han-learn:"Kaiti SC","STKaiti","KaiTi","AR PL UKai CN","Noto Serif SC",serif; /* educational model script for the learning tiles */ --measure:66ch; --measure-narrow:46ch; --rule:rgba(214,193,140,.16); /* per-animal defaults (overridden inline per page) */ --animal-primary:var(--a-gold); --animal-secondary:#e7d199; --animal-glow:rgba(214,193,140,.14); --animal-surface:#191b28; } *{box-sizing:border-box} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body.pf-page{ margin:0;background:var(--a-night);color:var(--a-snow); font-family:var(--sans);font-size:1.08rem;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{max-width:100%} .pf-page a{color:var(--a-gold);text-decoration:none} .pf-page a:hover{color:var(--a-gold)} .pf-page p{max-width:var(--measure)} .pf-page h1,.pf-page h2,.pf-page h3,.pf-page h4{font-family:var(--serif);font-weight:560;line-height:1.12;color:var(--a-snow)} .pf-page h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 .5em} .pf-page h3{font-size:1.2rem;margin:0 0 .4em} .pf-page strong{color:var(--a-snow)} :where(a,button,[tabindex],input,textarea,summary):focus-visible{ outline:2px solid var(--a-gold);outline-offset:2px;border-radius:3px} .skip-link{position:absolute;left:-999px;top:0;background:var(--a-gold);color:var(--a-night); padding:10px 16px;z-index:200;font-family:var(--sans);font-weight:600} .skip-link:focus{left:8px;top:8px} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px} /* ---- primitives ---- */ .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em; font-size:.72rem;color:var(--a-mist);margin:0 0 1em;font-weight:400} .wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1.5rem,4vw,3.5rem)} .section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative} .rule-top{border-top:1px solid var(--rule)} .lede{font-size:1.15rem;max-width:var(--measure)} .fineprint,.disclaimer{font-size:.82rem;color:var(--a-mist);max-width:60ch;margin:1.2em 0 0} .voice{display:inline-block;font-family:var(--mono);text-transform:uppercase; letter-spacing:.1em;font-size:.62rem;padding:.28em .7em;border-radius:999px;margin-bottom:.5em} .voice--fact{color:var(--a-mist);border:1px solid var(--rule)} .voice--tradition{color:var(--a-mist);border:1px solid rgba(90,91,112,.6)} .voice--reading{color:var(--a-gold);border:1px solid rgba(214,193,140,.55)} .chip{display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--rule); border-radius:999px;padding:.4em .9em;font-size:.82rem;color:var(--a-mist); font-family:var(--sans);background:none} .chip .k{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--a-mist)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em; min-height:44px;padding:.7em 1.3em;border-radius:8px;font-family:var(--sans); font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid var(--a-gold); background:var(--a-gold);color:var(--a-night);transition:transform .15s,background .2s} .btn:hover{transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--a-snow);border-color:var(--rule)} .btn--ghost:hover{border-color:var(--a-gold);color:var(--a-gold)} /* anchor buttons: outrank the global .pf-page a color */ .pf-page a.btn{color:var(--a-night)} .pf-page a.btn:hover{color:var(--a-night)} .pf-page a.btn--ghost{color:var(--a-snow);background:transparent} .pf-page a.btn--ghost:hover{color:var(--a-gold)} .textarea{width:100%;max-width:52ch;min-height:44px;padding:.7em .9em; background:rgba(236,231,216,.04);border:1px solid var(--rule); border-radius:8px;color:var(--a-snow);font-family:var(--sans);font-size:.95rem;resize:vertical} /* =========================== HERO =========================== */ .pf-hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(1rem,3vw,3rem); text-align:left;padding:clamp(2.5rem,5vh,3.5rem) clamp(1.5rem,4vw,4.5rem) clamp(1.75rem,3vh,2.25rem);overflow:hidden; background:radial-gradient(120% 100% at 80% 22%, var(--animal-surface) 0%, var(--a-night) 52%, var(--a-deep) 100%)} .pf-hero__art{order:2;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;aspect-ratio:1/1;max-height:52vh} .pf-hero__art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 60px rgba(0,0,0,.5))} .pf-hero__inner{order:1;position:relative;z-index:2;max-width:40ch} .pf-hero__cross{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--a-mist); text-transform:uppercase;margin:0 0 1.4rem;display:flex;gap:.5em;flex-wrap:wrap;align-items:center} .pf-hero__cross .g{color:var(--a-gold);font-size:1.05em} .pf-hero__cross b{color:var(--a-snow);font-weight:600} .pf-hero h1{font-size:clamp(3rem,6.5vw,6rem);margin:.15em 0 .35em;letter-spacing:-.015em;line-height:.98} .pf-hero__essence{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.4;color:var(--a-snow);max-width:34ch;margin:0 0 1.4rem} .pf-hero__serial{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--a-mist);margin:0 0 1.6rem} .pf-hero__serial b{color:var(--a-gold);font-weight:400} .pf-hero__actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .pf-hero__begin{display:inline-flex;align-items:center;gap:.5em;min-height:44px; font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mist)} .pf-hero__begin:hover{color:var(--a-gold)} @media (prefers-reduced-motion:no-preference){ .pf-hero__art{animation:breathe 7s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}} } /* =========================== READING RAIL =========================== */ .pf-shell{display:flex;align-items:flex-start} .pf-flow{flex:1 1 auto;min-width:0} #rail{position:sticky;top:var(--rail-top,0);align-self:flex-start;height:calc(100vh - var(--rail-top,0)); flex:0 0 var(--rail-w,262px);padding:1.5rem 1.15rem 1.35rem;display:flex;flex-direction:column;z-index:40; border-right:1px solid var(--rule);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; background:linear-gradient(180deg,rgba(9,10,18,.96),rgba(13,14,24,.92)); backdrop-filter:blur(9px)} @media (max-width:1179px){#rail{display:none} .pf-shell{display:block}} /* simple, compact identity: just the animal name with a small mark */ .rail__id{display:flex;align-items:center;gap:.55rem;padding:0 .3rem 1rem;margin-bottom:.9rem;border-bottom:1px solid var(--rule)} .rail__han{flex:0 0 auto;font-family:var(--han);font-size:1.35rem;line-height:1;color:var(--animal-primary,var(--a-gold))} .rail__name{font-family:var(--serif);font-size:1.1rem;color:var(--a-snow);line-height:1.12} .rail__nav{display:flex;flex-direction:column;position:relative;padding-left:.5rem} .rail__nav::before{content:"";position:absolute;left:.5rem;top:1rem;bottom:1rem;width:1px;background:var(--rule)} .rail-group{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem; font-family:var(--mono);font-size:.53rem;letter-spacing:.15em;text-transform:uppercase; color:var(--a-mist);padding:.85rem 0 .3rem 1.15rem;margin:0} .rail-group .t{color:var(--a-slate);letter-spacing:.05em} .rail__nav .rail-group:first-child{padding-top:.15rem} .rail-chapter{position:relative;display:flex;align-items:center;gap:.6rem;padding:.45em .5em .45em 1.15rem; font-size:.82rem;color:var(--a-mist);min-height:36px;line-height:1.15;border-radius:8px;transition:color .2s,background .2s} .rail-chapter::before{content:"";position:absolute;left:calc(.5rem - 3px);top:50%;transform:translateY(-50%); width:7px;height:7px;border-radius:50%;background:var(--a-night);border:1px solid var(--a-slate);transition:all .2s} .rail__label{flex:1} .rail-chapter:hover{color:var(--a-snow);background:rgba(214,193,140,.05)} .rail-chapter:hover::before{border-color:var(--a-gold)} .rail-chapter[aria-current="true"]{color:var(--animal-primary,var(--a-gold))} .rail-chapter[aria-current="true"]::before{background:var(--animal-primary,var(--a-gold));border-color:var(--animal-primary,var(--a-gold)); box-shadow:0 0 0 3px rgba(214,193,140,.22)} .rail-chapter.is-visited::before{background:var(--a-slate);border-color:var(--a-slate)} .rail__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule)} .rail__meter{height:3px;border-radius:3px;background:rgba(214,193,140,.12);overflow:hidden;margin-bottom:.5rem} .rail__meter-fill{display:block;height:100%;width:0;border-radius:3px;background:var(--animal-primary,var(--a-gold));transition:width .45s ease} #rail-progress{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;color:var(--a-mist);margin:0} #rail-progress b{color:var(--animal-primary,var(--a-gold));font-size:1.02rem} .rail__actions{display:flex;gap:.5rem;margin-top:.9rem} .rail__act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:34px; border:1px solid var(--rule);border-radius:9px;background:transparent;color:var(--a-mist);cursor:pointer; font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s} .rail__act:hover{border-color:var(--a-gold);color:var(--a-gold);background:rgba(214,193,140,.06)} /* mobile bottom bar + sheet */ #rail-bottom{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;justify-content:center; padding:.6rem;background:rgba(9,10,18,.92);border-top:1px solid var(--rule);backdrop-filter:blur(6px)} @media (min-width:1180px){#rail-bottom{display:none}} #rail-chapters-toggle{min-height:44px;padding:.5em 1.2em;border-radius:999px;border:1px solid var(--rule); background:transparent;color:var(--a-snow);font-family:var(--sans);font-weight:600;font-size:.85rem;cursor:pointer} #rail-bottom .rail__mobile-list{position:absolute;bottom:100%;left:0;right:0;padding:1rem 1rem 1.2rem; background:var(--a-deep);border-top:1px solid var(--rule);max-height:70dvh;overflow-y:auto; display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem} #rail-bottom .rail__mobile-list .rail-group{grid-column:1/-1;padding:.7rem 0 .2rem;margin:0} body.js-on #rail-bottom .rail__mobile-list[hidden]{display:none} /* top progress strip (mobile) */ #read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none; background:var(--a-gold);transform-origin:0 50%;transform:scaleX(var(--read,0))} @media (min-width:1180px){#read-progress{display:none}} /* =========================== FOOTER =========================== */ .pf-foot{border-top:1px solid var(--rule);padding:3rem 5vw 5.5rem;text-align:center;color:var(--a-mist)} .pf-foot .brand{font-family:var(--serif);font-size:1.2rem;color:var(--a-snow);margin-bottom:1rem} .pf-foot .brand b{color:var(--a-gold)} .pf-foot .disc{font-size:.8rem;max-width:70ch;margin:0 auto} /* reveal-on-scroll (enhancement only; JS-off = fully visible) */ @media (prefers-reduced-motion:no-preference){ body.js-on .reveal{opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} body.js-on .reveal.is-in{opacity:1;transform:none} body.js-on .reveal.d1{transition-delay:.08s} body.js-on .reveal.d2{transition-delay:.18s} } /* reduced motion global kill switch */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }