/* Mistero /energies/ - isolated two-section preview. Exact art extracted from approved 2026-10-08 image. */
.m22-section,.m22-section *{box-sizing:border-box}
.m22-section{position:relative;isolation:isolate;overflow:hidden;font-family:Inter,'Arial',sans-serif}
.m22-wrap{position:relative;z-index:1;max-width:1376px;margin:0 auto;padding-left:clamp(28px,5.5vw,88px);padding-right:clamp(28px,5.5vw,88px)}
.m22-section .m22-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--text-meta,11px);font-weight:500;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3,#655f55)}
.m22-section .m22-eyebrow .eyebrow__dot{display:inline-block;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--gold,#b98a3e);box-shadow:0 0 0 3px rgba(185,138,62,.16)}
.m22-section .m22-eyebrow::before{display:none}
.m22-section h2{font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-weight:400;letter-spacing:-.046em;text-wrap:balance}
.m22-section h2 em{font-style:italic;font-weight:400;letter-spacing:-.045em}
.m22-section figure{margin:0}
.m22-section p{margin:0}
.m22-why{background:#f8f4ec url('../img/energies-22/paper-exact-atmosphere.webp') center top / cover no-repeat;color:#161d24;padding:0 0 125px}
.m22-why__paper{position:absolute;inset:0;pointer-events:none;opacity:.57;background-image:radial-gradient(ellipse at 44% 28%,rgba(255,255,255,.68),transparent 62%),radial-gradient(ellipse at 89% 69%,rgba(198,159,108,.17),transparent 55%),radial-gradient(ellipse at 8% 56%,rgba(208,188,156,.16),transparent 54%)}
.m22-why__top{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);min-height:600px;align-items:start;padding-bottom:36px;position:relative;z-index:2}
.m22-why__copy{padding-top:96px;position:relative;z-index:3;max-width:665px}
.m22-why h2{font-size:clamp(47px,5vw,74px);line-height:1.045;margin:25px 0 24px;color:#151d22}
.m22-why h2 em{color:#a57a45}
.m22-heading-rule{height:28px;max-width:342px;border-top:1px solid #ddc79e;margin-top:20px;position:relative;color:#b48648;font-size:16px}
.m22-heading-rule span{position:absolute;top:-12px;left:23px;background:#f8f4ec;padding:0 7px}
.m22-section .m22-lead{font:400 17px/1.72 Inter,Arial,sans-serif;color:#464a4c;max-width:610px;margin:15px 40px 0 0}
.m22-section .m22-why__scene{height:516px;margin-top:84px;min-width:0;position:relative;overflow:visible;z-index:1;pointer-events:none}
.m22-why__scene>img{position:absolute;display:block;top:0;left:0;width:100%;height:516px;object-fit:contain;object-position:center top;mix-blend-mode:normal;}
.m22-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;position:relative;z-index:3;gap:0;padding:26px 0 48px}
.m22-benefit{padding:0 26px 18px 26px;min-width:0;position:relative;border-left:1px solid rgba(170,125,62,.38);display:grid;grid-template-rows:78px 72px auto;align-content:start}
.m22-benefit:first-child{border-left:0;padding-left:0}
.m22-benefit::after{content:'';position:absolute;width:5px;height:5px;background:#b98e5b;border-radius:50%;top:149px;left:-3px;opacity:.7}
.m22-benefit:first-child::after{display:none}
.m22-benefit__icon{height:82px;display:flex;align-items:flex-start}
.m22-benefit__icon img{width:70px;height:70px;display:block}
.m22-benefit h3{font:400 20px/1.33 'Source Serif 4','Source Serif Pro',Georgia,serif;color:#202126;margin:0;letter-spacing:-.016em;padding-bottom:16px;border-bottom:1px solid rgba(170,125,62,.2)}
.m22-benefit p{font:400 14.1px/1.66 Inter,Arial,sans-serif;color:#41484b;overflow-wrap:anywhere;padding-top:16px}
.m22-endnote{margin-top:0;border:1px solid rgba(173,129,71,.31);border-radius:8px;padding:24px 31px;display:flex;align-items:center;gap:28px;width:100%;max-width:none;background:rgba(239,225,207,.34);position:relative;z-index:3;box-shadow:0 7px 25px rgba(88,67,37,.025)}
.m22-endnote img{display:block;width:46px;height:46px;flex:none;border-right:1px solid rgba(183,140,79,.3);padding-right:18px;box-sizing:content-box}
.m22-endnote p{color:#3e4649;font:400 16.5px/1.6 Inter,Arial,sans-serif}
.m22-horizon{position:absolute;bottom:0;width:100%;height:78px;object-fit:fill;object-position:bottom;opacity:.85;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(transparent 0%,#000 52%);mask-image:linear-gradient(transparent 0%,#000 52%)}
.m22-how{background:#08131c url('../img/energies-22/night-sky-texture.png') center top / cover no-repeat;color:#f7ead8;border-top:2px solid #ab8550;min-height:720px}
.m22-how::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 68% 84% at 76% 53%,rgba(51,75,91,.22) 0%,rgba(32,51,65,.13) 44%,transparent 87%),linear-gradient(90deg,rgba(5,13,21,.34),transparent 78%)}
.m22-how__layout{display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);align-items:stretch;min-height:742px}
.m22-how__copy{position:relative;z-index:3;padding:104px 56px 105px 0}
.m22-how .m22-eyebrow{color:#d8d4cd}
.m22-how h2{font-size:clamp(45px,5.2vw,75px);line-height:1.05;color:#fff8ec;margin:24px 0 36px}
.m22-how h2 em{color:#dbb579}
.m22-how__paragraphs{max-width:615px}
.m22-how__paragraphs p{font:400 16.4px/1.72 Inter,Arial,sans-serif;color:#d5d2cf;margin:0 0 28px}
.m22-how__paragraphs a{color:#f2cb8d;text-decoration:underline;text-decoration-color:#af8557;text-underline-offset:4px}
.m22-how__figure{align-self:stretch;position:relative;pointer-events:none;min-width:0}
.m22-how__figure>img{position:absolute;height:100%;width:100%;left:0;top:0;object-fit:contain;object-position:50% 50%;}
/* The locked surrounding sections use their unchanged Mistero implementation. */
@media(max-width:1100px){
 .m22-why__top{grid-template-columns:53% 47%;min-height:575px}
 .m22-why__copy{padding-top:82px}
 .m22-why h2{font-size:clamp(44px,5.2vw,64px)}
 .m22-lead{font-size:15.5px;line-height:1.68}
 .m22-section .m22-why__scene{height:494px;margin-top:76px}.m22-why__scene>img{height:494px;width:100%;left:0}
 .m22-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}.m22-benefit{grid-template-rows:76px 80px auto;padding-inline:24px}.m22-benefit:nth-child(odd){border-left:0;padding-left:0}.m22-benefit h3{font-size:21px}.m22-benefit p{font-size:14.5px}.m22-benefit::after{top:155px}
 .m22-how__copy{padding:86px 36px 93px 0}.m22-how h2{font-size:clamp(42px,5.1vw,60px)}
 .m22-how__paragraphs p{font-size:15px}
}
@media(max-width:760px){
 .m22-wrap{padding-inline:28px}
 .m22-why{padding-bottom:65px}
 .m22-why__top{display:flex;flex-direction:column;min-height:0;padding-bottom:24px}
 .m22-why__copy{padding-top:72px;max-width:100%}
 .m22-why h2{font-size:clamp(43px,8vw,67px);max-width:660px;margin-top:21px}
 .m22-section .m22-lead{font-size:16px;max-width:680px;margin-right:0}
 .m22-section .m22-why__scene{height:min(69vw,495px);width:100%;margin-top:24px}
 .m22-why__scene>img{width:100%;height:100%;left:0;top:0;object-fit:contain;object-position:50% 50%}
 .m22-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px;padding-top:38px}
 .m22-benefit{padding:0 20px 15px;border-left:0;grid-template-rows:70px auto auto}
 .m22-benefit:nth-child(odd){padding-left:0}
 .m22-benefit:nth-child(even){border-left:1px solid rgba(170,125,62,.32)}
 .m22-benefit::after{top:128px}
 .m22-endnote{margin-top:24px;padding:18px 21px}
 .m22-how__layout{display:flex;flex-direction:column}
 .m22-how__copy{padding:78px 0 0}
 .m22-how h2{font-size:clamp(44px,8.2vw,65px)}
 .m22-how__paragraphs{max-width:650px}
 .m22-how__figure{width:100%;height:470px}
 .m22-how__figure>img{width:100%;height:100%;left:0;object-fit:contain;object-position:center center}
}
@media(max-width:480px){
 .m22-wrap{padding-inline:21px}
 .m22-section .m22-eyebrow{font-size:10px;gap:9px}
 .m22-why__copy{padding-top:60px}
 .m22-why h2{font-size:clamp(40px,10vw,55px);letter-spacing:-.05em}
 .m22-heading-rule{max-width:240px;height:25px}
 .m22-lead{font-size:15px;line-height:1.66}
 .m22-section .m22-why__scene{height:310px;margin:24px -21px 0;width:calc(100% + 42px)}
 .m22-why__scene>img{width:100%;height:100%}
 .m22-benefits{grid-template-columns:1fr;gap:0}
 .m22-benefit,.m22-benefit:nth-child(odd),.m22-benefit:nth-child(even){padding:20px 0 22px;border:0;border-top:1px solid rgba(170,125,62,.3);grid-template-rows:65px auto auto}
 .m22-benefit::after{display:none}
 .m22-benefit__icon{height:65px}.m22-benefit__icon img{width:57px;height:57px}
 .m22-benefit h3{font-size:21px;min-height:0;padding-bottom:11px}.m22-benefit p{font-size:14.6px;line-height:1.64;padding-top:12px}
 .m22-endnote{align-items:flex-start;margin-top:26px;gap:13px;padding:19px 14px}
 .m22-endnote img{width:28px;height:28px;padding-right:10px}.m22-endnote p{font-size:14.5px}
 .m22-why{padding-bottom:55px}
 .m22-horizon{height:56px}
 .m22-how__copy{padding-top:64px}
 .m22-how h2{font-size:clamp(41px,10vw,56px);margin-top:21px}
 .m22-how__paragraphs p{font-size:15.2px;line-height:1.69}
 .m22-how__figure{height:370px}
}

/* Seamless edge treatment for the extracted, non-regenerated celestial art. */
/* Celestial asset is separately edge-feathered, leaving frame and typography independent. */

/* Art edge belongs to the section: broad celestial light and lower mist extend behind the figure. */
.m22-how::after{content:'';position:absolute;inset:auto 0 0;height:46%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 55% at 79% 98%,rgba(120,101,79,.16),transparent 84%),linear-gradient(180deg,transparent 0%,rgba(2,11,18,.35) 100%)}
@media(min-width:1121px){.m22-benefit__icon{height:78px}}
@media(min-width:761px) and (max-width:1100px){.m22-benefit{grid-template-rows:76px 80px auto}.m22-benefits{row-gap:32px}.m22-why{padding-bottom:125px}}
@media(max-width:760px){.m22-why{padding-bottom:110px}.m22-how__layout{min-height:0}.m22-how__figure>img{object-position:center top}}
@media(max-width:480px){.m22-why{padding-bottom:88px}.m22-benefit{display:grid}.m22-how__figure{height:365px}}

.m22-why__archetypes{position:absolute;z-index:3;left:1%;right:1%;bottom:4px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 17px;color:#a77b40;font:700 10px/1.55 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 4px rgba(248,244,236,.9)}.m22-why__archetypes span{white-space:nowrap}.m22-why__archetypes b{font-weight:600;opacity:.67;padding-left:5px}@media(max-width:760px){.m22-why__scene{margin-bottom:18px}.m22-why__archetypes{font-size:9px;bottom:-14px;gap:5px 9px}}@media(max-width:480px){.m22-why__scene{margin-bottom:24px}.m22-why__archetypes{bottom:-20px}}

/* No visual image frame. Source-preserving PNG alpha fades to the full-bleed section atmosphere. */