/* Wealth10 R9 | scoped improvements based on Paul's 4 screenshots, no imagegen
   R8 original untouched. Real DOM text, node buttons, tab controls and portraits preserved. */

/* 0. Page-wide legibility. Prior 9-11px editorial copy is not readable. */
body{font-size:16px}
.site-header nav a,.brand-name small,.nav-action,.hero-bottom,.stage-note,
.chapter-marker,.eyebrow,.micro-label,.concept-status,.interface-label,
.insight-top,.insight-label,.insight-action,.insight-context,
.insight-tiny,.sculpture-legend,.tree-disclaimer,.matrix-top .quiet-copy,
.mentor-story .eyebrow,.mentor-position,.mentor-quote small,
.practice-heading p,.practice-heading span,.practice-strip figcaption,
.last-section>.eyebrow,.last-section>p:not(.eyebrow),.site-footer,
.hero .hero-offer,.quiet-copy,.hero-description,.stage-note {
 font-size:max(14px,1rem);
 letter-spacing:.045em;line-height:1.8;
}
.micro-label,.eyebrow,.chapter-marker,.interface-label,.insight-top,
.insight-label,.practice-heading p,.site-footer,.concept-status{
 font-size:13px;letter-spacing:.09em;
}
.quiet-copy,.mentor-story .quiet-copy,.hero-description,.threshold .quiet-copy,
.matrix-top .quiet-copy,.last-section>p:not(.eyebrow){
 font-size:16px;line-height:1.95;
}
.practice-heading span{font-size:15px;line-height:1.85;color:#524357}
.node-orb .node-label{font-size:13px;letter-spacing:.015em}
.insight-question{font-size:clamp(22px,2.05vw,30px);line-height:1.65}
.insight-action{font-size:16px;line-height:1.85}
.tree-insight .insight-label{font-size:13px;letter-spacing:.065em;color:#edcedf}
.matrix-interface .interface-label{font-size:14px;color:#f3d5e1}
.matrix-interface #axis-description{font-size:16px;line-height:1.95;color:#e7d6e5}
.practice-strip figcaption{font-size:14px;font-weight:600}

/* 1. TREE: eliminate duplicate panorama entirely.
   Spatial stage is native layered CSS lighting + a UNIQUE small pillar detail.
   The real 10-node geometry remains on top, not baked into a picture. */
.tree-section{
 background-color:#21132e;
 background-image:
  radial-gradient(ellipse 42% 60% at 42% 42%,rgba(181,113,198,.28),transparent 84%),
  radial-gradient(ellipse 29% 37% at 41% 66%,rgba(249,209,158,.30),transparent 82%),
  linear-gradient(115deg,#1a1128 2%,#362043 35%,#291633 60%,#140b24 100%);
 background-size:cover;
 position:relative;isolation:isolate;
}
.tree-section::before{
 content:"";position:absolute;pointer-events:none;z-index:0;
 top:10%;bottom:8%;left:0;width:24%;opacity:.48;
 background:url("assets/tree_pillar_detail.webp") left center / cover no-repeat;
 -webkit-mask-image:linear-gradient(90deg,#000 0%,#000c 37%,transparent 100%);
 mask-image:linear-gradient(90deg,#000 0%,#000c 37%,transparent 100%);
}
.tree-section::after{
 content:"";position:absolute;pointer-events:none;z-index:0;inset:0;
 background:
  radial-gradient(ellipse 24% 32% at 49% 45%,rgba(249,210,184,.18),transparent 95%),
  linear-gradient(180deg,rgba(11,8,24,.60),transparent 30%,transparent 70%,rgba(14,8,24,.61));
}
.tree-experience::before{
 z-index:0;width:65%;opacity:.86;
 background:
  radial-gradient(ellipse 30% 45% at 43% 46%,rgba(219,174,233,.29),transparent 99%),
  linear-gradient(105deg,transparent 14%,rgba(250,221,176,.07) 16%,transparent 19%,transparent 74%,rgba(244,209,168,.09) 76%,transparent 78%);
}
.tree-environment{overflow:visible;background:transparent}
.tree-environment::before{
 content:"";pointer-events:none;position:absolute;z-index:0;
 inset:10% 4% 0;
 opacity:.78;
 background:
  linear-gradient(100deg,transparent 17%,rgba(247,215,173,.09) 17.3%,transparent 18%),
  linear-gradient(80deg,transparent 81%,rgba(247,215,173,.08) 81.3%,transparent 82%);
}
.tree-environment::after{
 content:"";position:absolute;pointer-events:none;z-index:0;
 left:8%;right:7%;bottom:3%;height:24%;
 opacity:.63;
 background:
  repeating-radial-gradient(ellipse at 50% 100%,transparent 0 32px,rgba(241,211,179,.16) 34px 36px,transparent 38px 74px),
  radial-gradient(ellipse at 49% 90%,rgba(237,186,225,.18),transparent 78%);
 transform:perspective(450px) rotateX(64deg);
}
.tree-aura{opacity:1;filter:blur(16px)}
.tree-backplate{
 background:linear-gradient(128deg,rgba(47,29,71,.22),rgba(82,44,99,.09) 40%,rgba(22,10,42,.28));
 border:1px solid rgba(250,224,177,.69);
 box-shadow:inset 0 0 45px rgba(241,203,186,.13),0 0 29px rgba(245,199,158,.18),0 30px 75px rgba(9,4,19,.40);
}
.tree-insight{
 margin:20px 24px 26px 8px;
 border-radius:24px 24px 10px 10px;
 border:1px solid rgba(250,219,173,.87);
 background:
   radial-gradient(ellipse at 100% 0%,rgba(192,129,208,.30),transparent 64%),
   linear-gradient(145deg,rgba(40,22,56,.94),rgba(23,11,42,.96) 70%);
 box-shadow:0 18px 65px rgba(10,3,24,.52),0 0 0 7px rgba(245,205,179,.075),
  inset 0 0 43px rgba(220,151,215,.14);
 padding:clamp(28px,4vw,60px);
}
.tree-insight::before{
 inset:11px;border:1px solid rgba(253,222,183,.55);
 border-radius:16px 16px 5px 5px;
 box-shadow:inset 0 0 25px rgba(249,217,178,.06);
}
.tree-insight::after{
 content:"✦";font-size:140px;right:-9px;bottom:-54px;top:auto;width:auto;height:auto;
 color:rgba(230,172,219,.095);line-height:1;
 border:0;box-shadow:none;transform:none;pointer-events:none;
}
.tree-insight h3{text-shadow:0 0 19px rgba(248,197,214,.25)}
.tree-insight .insight-top{padding-bottom:25px;border-bottom:1px solid rgba(242,212,176,.42)}
.tree-controls button{min-width:44px;min-height:44px}

/* 2. MATRIX: a distinct installation. Replace the square/block impression
   with an elongated faceted floating stone + breathing halo and spatial rails.
   All changes purely CSS; original working 3-axis JS unchanged. */
.matrix-visual{
 background-position:center,50% 42%;
}
.matrix-visual::after{
 content:"";position:absolute;pointer-events:none;z-index:1;inset:0;
 background:
  radial-gradient(ellipse 20% 13% at 50% 78%,rgba(255,228,175,.48),transparent 94%),
  linear-gradient(90deg,transparent 18%,rgba(244,217,196,.08) 50%,transparent 82%);
}
.m-ring{
 border:1px solid rgba(255,225,180,.62);
 box-shadow:0 0 27px rgba(255,214,187,.32),inset 0 0 24px rgba(246,202,234,.26);
}
.m-ring.ring-one{filter:drop-shadow(0 0 11px rgba(252,201,201,.39))}
.m-core{
 width:204px;height:247px;top:44%;left:50%;
 transform:translate(-50%,-50%);border:0;border-radius:0;
 clip-path:polygon(50% 0%,66% 12%,87% 37%,100% 57%,78% 78%,50% 100%,22% 78%,0 57%,13% 37%,34% 12%);
 background:conic-gradient(from 225deg at 50% 39%,#f6c9ed,#8662ad 16%,#fff3de 29%,#cf9dd5 45%,#553376 65%,#d7a4db 80%,#f9d6ae 97%,#f6c9ed);
 box-shadow:0 0 42px 15px rgba(246,211,197,.75),0 0 102px rgba(210,139,232,.46);
 filter:drop-shadow(0 0 27px rgba(255,225,186,.86));
 animation:r9PrismFloat 6.6s ease-in-out infinite alternate!important;
}
.m-core::before{
 inset:6% 15%;border:0;border-radius:0;transform:none;
 clip-path:polygon(50% 0%,100% 42%,73% 73%,50% 100%,22% 74%,0 42%);
 background:linear-gradient(130deg,rgba(255,252,227,.93),rgba(229,182,244,.55) 27%,rgba(56,30,99,.82) 63%,rgba(252,226,173,.69) 100%);
 box-shadow:inset 0 0 17px #fff1d5;
 filter:none;
}
.m-core::after{
 inset:20% 29%;border:0;transform:none;
 clip-path:polygon(50% 0%,100% 45%,50% 100%,0 45%);
 background:linear-gradient(100deg,rgba(255,253,230,.87),rgba(231,174,234,.26) 45%,rgba(46,26,77,.58) 72%,rgba(255,219,191,.60));
 opacity:.83;
}
.m-beam{
 width:3px;box-shadow:0 0 30px 10px rgba(248,213,181,.45),0 0 59px 18px rgba(224,172,235,.24);
}
.matrix-perspective{filter:drop-shadow(0 0 23px rgba(255,201,199,.34))}
@keyframes r9PrismFloat{
 0%{transform:translate(-50%,-50%) translateY(-13px) rotate(-3deg);filter:drop-shadow(0 0 18px rgba(255,227,189,.75))}
 50%{filter:drop-shadow(0 0 39px rgba(236,174,244,.96))}
 100%{transform:translate(-50%,-50%) translateY(12px) rotate(3deg);filter:drop-shadow(0 0 33px rgba(255,226,191,.96))}
}
.matrix-interface{box-shadow:inset 1px 0 0 rgba(246,214,174,.51);padding-top:68px;padding-bottom:65px}
.matrix-installation{box-shadow:0 0 0 7px rgba(255,248,237,.50),0 39px 90px rgba(51,29,69,.45)}
.axis-tab{font-size:16px;min-height:65px}

/* 3. Mentor: layered illuminated interior and offset ornamental frame
   while authentic photo stays unmodified. */
.mentor-section{
 background:
  radial-gradient(ellipse 60% 80% at 90% 34%,rgba(124,65,133,.27),transparent 91%),
  linear-gradient(115deg,#170e25,#322043 52%,#10091f);
}
.mentor-section::before{
 opacity:.89;
 background:
  linear-gradient(90deg,rgba(19,9,29,.64) 0%,rgba(22,12,36,.21) 36%,rgba(17,8,31,.48) 69%,rgba(19,9,29,.60)),
  url("assets/mentor_cathedral.webp") 55% 52% / cover no-repeat;
}
.mentor-story{
 isolation:isolate;
 margin:27px 30px 27px 7px;
 border:1px solid rgba(247,213,172,.75);
 border-radius:26px 26px 10px 10px;
 background:
  radial-gradient(ellipse 85% 66% at 76% 12%,rgba(144,82,160,.21),transparent 76%),
  linear-gradient(140deg,rgba(42,23,58,.84),rgba(20,11,37,.84));
 backdrop-filter:blur(7px);
 box-shadow:0 25px 78px rgba(8,4,21,.57),0 0 0 8px rgba(240,191,205,.07),inset 0 0 38px rgba(239,199,169,.08);
}
.mentor-story::before{border-color:rgba(248,224,180,.46)}
.mentor-story::after{
 content:"";position:absolute;right:35px;top:39px;width:84px;height:84px;pointer-events:none;
 border-top:1px solid rgba(244,218,182,.77);
 border-right:1px solid rgba(244,218,182,.77);
 background:radial-gradient(circle at 90% 10%,rgba(250,208,184,.20),transparent 60%);
}
.mentor-story .quiet-copy{color:#eadce6;max-width:550px}
.mentor-position{font-size:16px;color:#f0d0b3}
.mentor-quote{font-size:19px;line-height:1.8;color:#f6e8df}
.mentor-photo-line{border-color:rgba(252,221,180,.83);box-shadow:0 0 0 7px rgba(247,212,190,.09),0 0 60px rgba(250,190,183,.25)}
.mentor-media::after{
 background:linear-gradient(90deg,rgba(26,9,30,.09),transparent 66%,rgba(15,8,25,.68) 100%);
}

/* 4. Real photo gallery: the original photos remain real, while the
   backdrop has actual architectural depth, not a beige empty wash. */
.practice-strip{
 background:
  linear-gradient(90deg,rgba(252,244,236,.92) 0%,rgba(252,243,235,.59) 29%,rgba(240,221,228,.52) 100%),
  url("assets/gallery_cathedral.webp") center 40% / cover no-repeat;
}
.practice-strip::before{
 background:
  linear-gradient(180deg,rgba(255,252,248,.13),transparent 48%,rgba(117,67,114,.13)),
  radial-gradient(ellipse 37% 75% at 9% 38%,rgba(255,246,231,.78),transparent 87%);
}
.practice-heading{
 padding:31px 25px 31px 10px;align-self:center;
 border-left:2px solid rgba(179,111,166,.66);
 border-radius:3px;
 background:linear-gradient(90deg,rgba(255,250,244,.46),transparent);
 text-shadow:0 1px 5px rgba(255,252,249,.72);
}
.practice-heading h2{margin:32px 0 37px}
.practice-heading p,.practice-heading span{color:#49354b}
.practice-heading p{font-size:13px}
.practice-heading::after{color:#9b648f;opacity:.89}
.practice-strip figure{
 box-shadow:0 0 0 6px rgba(255,248,237,.68),0 21px 57px rgba(84,46,87,.43);
}
.practice-strip figcaption{font-size:15px;letter-spacing:.06em}

/* 5. Small-text mobile guardrails; don't sacrifice real controls. */
@media(max-width:1100px) and (min-width:761px){
 .tree-insight{margin:15px 12px 25px 0;padding:30px}
 .tree-insight .insight-action{font-size:15px}
 .mentor-story{margin:12px;padding:45px 32px}
}
@media(max-width:760px){
 body{font-size:16px}
 .concept-status,.site-header nav a,.chapter-marker,.eyebrow,.micro-label,
 .insight-label,.insight-top,.interface-label,.practice-heading p{
   font-size:13px;letter-spacing:.035em;
 }
 .quiet-copy,.mentor-story .quiet-copy,.matrix-top .quiet-copy,
 .practice-heading span,.last-section>p:not(.eyebrow){font-size:15px;line-height:1.85}
 .tree-section::before{
  width:38%;top:7%;bottom:8%;opacity:.31;
  background-position:left center;
 }
 .tree-insight{width:100%;margin:0;border-radius:17px 17px 0 0;padding:32px 25px 45px}
 .tree-insight::before{inset:8px}
 .tree-environment{height:600px}
 .sculpture-frame{top:45%}
 .node-orb .node-label{font-size:12px}
 .matrix-installation{overflow:hidden}
 .m-core{width:144px;height:184px}
 .matrix-interface #axis-description{font-size:16px}
 .mentor-section::before{opacity:.62;background-position:62% center}
 .mentor-story{margin:0 13px 20px;border-radius:18px;padding:48px 28px 65px}
 .mentor-story::before{inset:7px;border-radius:12px}
 .mentor-story::after{right:19px;top:18px;width:44px;height:44px}
 .mentor-quote{font-size:17px}
 .practice-strip{
  background-position:center,57% center;
  padding:65px 22px 85px;
 }
 .practice-heading{padding:20px 10px 20px 16px}
 .practice-strip figcaption{font-size:14px}
}
@media(max-width:480px){
 .tree-environment{height:580px}
 .node-orb .node-label{font-size:11px}
 .tree-insight .insight-action{font-size:15px}
 .m-core{width:114px;height:144px}
 .mentor-story{padding:47px 23px 66px}
 .practice-heading h2{font-size:clamp(29px,7.3vw,39px)}
}
@media(prefers-reduced-motion:reduce){
 .m-core{animation:none!important;transform:translate(-50%,-50%)}
}

/* Screenshot QA correction: section-scoped title must not stay invisible when
   a long mobile section is first captured/scrolled into its middle. */
@media(max-width:760px){
 #constellation .tree-intro .reveal{
   opacity:1!important;visibility:visible!important;
   transform:none!important;
 }
 #constellation .tree-intro{
   position:relative;z-index:4;
   min-height:230px;
 }
 #constellation .tree-intro h2{
   font-size:clamp(29px,7vw,42px);
   line-height:1.43;
 }
 #constellation .tree-intro .quiet-copy{
   font-size:15px;line-height:1.8;
 }
}

@media(max-width:480px){.node-orb .node-label{font-size:13px;letter-spacing:0;text-shadow:0 1px 7px #180b27,0 0 12px #180b27}.sculpture-legend{font-size:14px}}