@font-face{font-family:'Morfin Sans';src:url('/assets/MorfinSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--compo-paper:#f2efe8;--compo-cream:#fbf8f0;--compo-ink:#11100f;--compo-muted:#6e6961;--compo-grid:#d9d3c8;--compo-blue:#2639ff;--compo-red:#ef372e;--compo-yellow:#f7ee3b;--compo-green:#173d2c;--compo-cyan:#20c7bf}
h1,h2,h3,h4,h5,h6{font-family:'Morfin Sans',Arial,Helvetica,sans-serif;letter-spacing:.02em!important}
.hero h1,.hero h2,.section-title h2,.block-head h3,.topic-title{font-family:'Morfin Sans',Arial,Helvetica,sans-serif;letter-spacing:.025em!important}
.block-head h3{font-size:clamp(36px,4vw,58px)!important;line-height:.9!important}
.topic-title{font-size:clamp(29px,2.7vw,40px)!important;line-height:.92!important;letter-spacing:.035em!important}
@media(max-width:700px){.block-head h3{font-size:34px!important}.topic-title{font-size:29px!important}}
/* COMPO MAIN visual layer: decorative treatment around canonical content */
body:has(.hero-inner) .hero{background:linear-gradient(135deg,#0b0b0c 0%,#151517 55%,#090a0b 100%)!important}
body:has(.hero-inner) .hero:after{content:"";position:absolute;right:5.5%;top:12%;width:132px;height:188px;background:#111 url('/assets/compo-test/decor-seal-v1.webp') center/contain no-repeat;border:1px solid rgba(255,255,255,.55);opacity:.9;pointer-events:none}
body:has(.hero-inner) .hero-inner:before{content:"";position:absolute;right:19%;bottom:4%;width:260px;height:155px;background:#111 url('/assets/compo-test/decor-flower-v1.webp') center/cover no-repeat;border:1px solid rgba(255,255,255,.55);transform:rotate(-3deg);opacity:.9;pointer-events:none}
body:has(.hero-inner) .hero-inner:after{content:"";position:absolute;right:6%;top:8%;width:48px;height:48px;background:linear-gradient(90deg,#ffd400 0 25%,transparent 25% 50%,#ff4b1f 50% 75%,transparent 75%),linear-gradient(0deg,#00a6a6 0 25%,transparent 25% 50%,#2639ff 50% 75%,transparent 75%);background-size:18px 18px;opacity:.9;transform:rotate(12deg);pointer-events:none}
body:has(.hero-inner) .hero h1{letter-spacing:.02em!important;text-shadow:10px 10px 0 rgba(38,57,255,.16)}
body:has(.hero-inner) .hero-copy{max-width:760px;position:relative;z-index:3}
body:has(.hero-inner) .hero-meta{position:relative;box-shadow:8px 8px 0 #2639ff;border-top:5px solid #ff4b1f;transform:rotate(0deg);transition:transform .45s ease,box-shadow .45s ease}
body:has(.hero-inner) .hero-meta:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #ff4b1f}
body:has(.hero-inner) .rail{animation:compo-main-rail 12s ease-in-out infinite}
body:has(.hero-inner) .hero-meta:after{content:"";display:block;position:absolute;right:-34px;bottom:-42px;width:76px;height:96px;background:#111 url('/assets/compo-test/decor-seed-v1.webp') center/contain no-repeat;border:1px solid #111;transform:rotate(8deg);z-index:-1}
body:has(.hero-inner) .nav a{transition:background .25s ease,color .25s ease,transform .25s ease}
body:has(.hero-inner) .nav a:hover{transform:translateY(-2px);color:#111!important}
body:has(.hero-inner) .topic{transition:background .35s ease,padding .35s ease}
body:has(.hero-inner) .topic:hover{background:linear-gradient(90deg,rgba(247,238,59,.14),transparent 55%);padding-left:8px;padding-right:8px}
@keyframes compo-main-signal{0%,100%{transform:rotate(12deg) translate(0,0);opacity:.6}50%{transform:rotate(18deg) translate(-10px,12px);opacity:1}}
@keyframes compo-main-rail{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:900px){body:has(.hero-inner) .hero-inner:before{right:12%;bottom:6%;width:210px;height:128px}body:has(.hero-inner) .hero:after{right:4%;top:10%;width:96px;height:138px}}
@media(prefers-reduced-motion:reduce){body:has(.hero-inner) .rail{animation:none!important}}
.compo-tech-label{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.compo-swatch{display:inline-block;width:1.1em;height:1.1em;border:1px solid #111;vertical-align:-.15em;margin-right:.35em}