/* Inner Universe: the original composition in warm paper, olive, and copper. */
.noir{--ink:#37392c;--display:Georgia,'Times New Roman',serif;background:#f5f0e7;color:#37392c}
.noir ::selection{background:#ddc5a8;color:#37392c}
.noir .noir-hero{background:radial-gradient(ellipse at 79% 45%,#eac9a440 0%,#f2e5d92b 43%,transparent 72%),#f5f0e7}
.noir .brand-star{color:#a86742}
.noir .site-nav .wordmark{font-weight:500}
.noir .noir-intro{max-width:680px;margin-top:65px}
.noir .noir-intro h1{font-family:var(--display);font-size:clamp(64px,7vw,108px);line-height:1.06;letter-spacing:-4.5px;margin:33px 0 29px;color:#3b3d2e}
.noir .noir-intro h1 em{color:#a36642;font-size:.86em;letter-spacing:-3.5px}
.noir .noir-intro .hero-copy{font-size:14px;line-height:1.8;color:#77725f}
.noir .eyebrow{color:#827c65;font-size:9px;letter-spacing:.14em}
.noir .signup-wrap{max-width:450px;margin-top:29px}
.noir .signup{border:1px solid #a69c806b;background:#ffffff59;border-radius:3px;padding:4px;gap:4px;backdrop-filter:blur(8px)}
.noir .signup input{color:#474b37;font-size:11px;padding:12px 11px}
.noir .signup button{background:#48523a;color:#f8f3e5;font-size:10px;padding:15px 17px;border-radius:2px}
.noir .signup button:hover{background:#657052}
.noir .form-note{color:#89836f;font-size:8px}
.noir .form-result{color:#6b5a3e}
.noir .universe{right:-11%;width:76%;opacity:1}
.noir .noir-coordinates{color:#9b8d70}
.noir .noir-baseline{color:#857b60}
.noir .motion-toggle{color:#7e745a}
.noir .noir-vision{border-top:1px solid #d9d1bd;background:#f6f2e9}
.noir .noir-vision h2{font-family:var(--display);color:#434532}
.noir .noir-vision h2 em{color:#a56a47}
.noir .noir-vision-copy{color:#817966;font-size:14px}
.noir .noir-principles{border-color:#d9d1bd;color:#8a816a}
.noir .noir-updates{background:#3d4735;color:#f4efdf}
.noir .noir-updates .eyebrow{color:#c8c9af}
.noir .noir-updates h2{color:#f3edde}
.noir .noir-updates h2 em{color:#d4c7a4}
.noir .noir-updates>p{color:#c2c4ae}
.noir .noir-updates .signup{background:transparent;border-color:#c7c7a75c}
.noir .noir-updates .signup input{color:#f4efdf}
.noir .noir-updates .signup button{background:#e4ddc2;color:#3d4735}
.noir .noir-updates .signup button:hover{background:#f3ecd4}
.noir .noir-updates .form-note{color:#b7bca4}
.noir .noir-updates .form-result{color:#e4ddc2}
.noir .site-footer{border-color:#acb0914f;color:#c1c6af}
.noir .site-footer .wordmark{color:#f1ecda}
.noir .site-footer .brand-star{color:#d4c7a4}
@media(min-width:1600px){.noir .noir-intro{margin-top:100px}}
@media(max-width:1100px) and (min-width:761px){.noir .noir-intro h1{font-size:78px;letter-spacing:-3px}.noir .noir-intro{margin-top:90px}.noir .universe{right:-25%;width:100%;opacity:.85}}
@media(max-width:760px){
 .noir .noir-hero{min-height:1040px;background:radial-gradient(ellipse at 50% 79%,#e9c49a40 0%,transparent 55%),#f5f0e7}
 .noir .noir-intro{margin:50px 24px 365px;max-width:680px}
 .noir .noir-intro h1{font-size:clamp(49px,9.6vw,73px);letter-spacing:-2.5px;line-height:1.08;margin:33px 0 27px}
 .noir .noir-intro h1 em{font-size:.88em;letter-spacing:-2px}
 .noir .noir-intro .hero-copy{font-size:12px;line-height:1.8}
 .noir .noir-intro .eyebrow{font-size:7px}
 .noir .signup input{font-size:10px;padding:12px 9px}
 .noir .signup button{font-size:9px;padding:14px 11px;gap:10px}
 .noir .signup-wrap{margin-top:26px}
 .noir .universe{width:530px;height:430px;right:calc(50% - 265px);top:auto;bottom:54px;opacity:1}
 .noir .noir-vision-copy{font-size:13px}
 .noir .noir-baseline{font-size:6px}
}
@media(max-width:360px){.noir .noir-intro{margin-left:18px;margin-right:18px}.noir .noir-intro h1{font-size:47px}.noir .signup button{font-size:8px;padding:14px 9px}}

/* One reading path: headline, explanation, then the three principles. */
.noir .noir-vision{padding-top:104px;padding-bottom:100px}
.noir .vision-reading{width:100%;max-width:820px;margin:0 auto}
.noir .noir-vision h2{max-width:100%;font-size:clamp(48px,5.1vw,74px);line-height:1.12;letter-spacing:-2.5px;margin:28px 0 32px}
.noir .noir-vision-copy{display:block;margin:0;max-width:650px;color:#6e6b57;font-size:16px;line-height:1.8}
.noir .noir-vision-copy p{line-height:1.8}
.noir .noir-vision-copy p+p{margin-top:22px}
.noir .noir-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;counter-reset:principle;margin:44px 0 0;padding:27px 0 0;border-top:1px solid #d9d1bd;color:#535b43;letter-spacing:0;font-size:14px;line-height:1.6}
.noir .noir-principles li{display:flex;align-items:baseline;gap:12px;counter-increment:principle}
.noir .noir-principles li:before{content:counter(principle,decimal-leading-zero);font-size:9px;letter-spacing:.04em;color:#a56a47;flex-shrink:0}
@media(max-width:760px){
 .noir .noir-vision{padding-top:68px;padding-bottom:68px}
 .noir .noir-vision .eyebrow{font-size:8px;letter-spacing:.10em}
 .noir .noir-vision h2{font-size:clamp(29px,8.5vw,40px);line-height:1.16;letter-spacing:-.9px;margin:24px 0 26px}
 .noir .noir-vision-copy{font-size:15px;max-width:100%}
 .noir .noir-vision-copy p,.noir .noir-vision-copy p+p{line-height:1.8}
 .noir .noir-vision-copy p+p{margin-top:20px}
 .noir .noir-principles{grid-template-columns:1fr;gap:0;margin-top:30px;padding-top:0;font-size:14px}
 .noir .noir-principles li{padding:16px 0;border-bottom:1px solid #d9d1bd;gap:17px}
}

/* A personal constellation gives the vision a visual identity. */
.noir .noir-vision{overflow:hidden;background:radial-gradient(ellipse at 78% 40%,#e9d3ad21 0%,transparent 64%),#f6f2e9;padding-top:106px;padding-bottom:74px}
.noir .vision-reading{max-width:1240px}
.noir .vision-composition{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:24px;align-items:center}
.noir .vision-story{position:relative;z-index:1;padding:18px 0}
.noir .noir-vision h2{font-size:clamp(46px,4.25vw,66px);letter-spacing:-2.1px;line-height:1.14;margin:28px 0 29px}
.noir .noir-vision-copy{max-width:540px;font-size:15px;color:#77715c}
.noir .noir-vision-copy p+p{margin-top:20px}
.noir .vision-constellation{margin:-24px -32px -10px -12px;align-self:center;aspect-ratio:1;position:relative;min-width:0}
.noir .vision-constellation svg{display:block;width:100%;height:100%;overflow:visible}
.noir .constellation-flow{stroke-dasharray:12 88;animation:constellation-connect 12s linear infinite;opacity:.6}
.noir .constellation-flow:nth-child(2){animation-delay:-4s}
.noir .constellation-flow:nth-child(3){animation-delay:-8s}
.noir .constellation-core-halo{transform-origin:302px 302px;animation:constellation-glow 7s ease-in-out infinite}
.noir .noir-principles{gap:0;margin-top:54px;padding-top:29px;grid-template-columns:repeat(3,minmax(0,1fr));font-size:15px;color:#5c634b}
.noir .noir-principles li{counter-increment:none;gap:16px;align-items:center;padding:0 20px 0 0}
.noir .noir-principles li:before{content:none}
.noir .noir-principles li+li{padding-left:34px;border-left:1px solid #dbd3c0}
.noir .principle-symbol{flex:0 0 43px;width:43px;height:43px;color:#a4895c}
.noir .principle-symbol svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.noir[data-motion="paused"] .constellation-flow,.noir[data-motion="paused"] .constellation-core-halo{animation-play-state:paused}
@keyframes constellation-connect{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes constellation-glow{0%,100%{opacity:.65;transform:scale(.90)}50%{opacity:1;transform:scale(1.13)}}
@media(min-width:1800px){.noir .vision-composition{gap:70px}}
@media(max-width:1000px){
 .noir .vision-reading{max-width:720px}
 .noir .vision-composition{grid-template-columns:1fr;gap:0}
 .noir .vision-story{padding:0}
 .noir .noir-vision h2{font-size:clamp(42px,6.2vw,62px)}
 .noir .noir-vision-copy{max-width:100%;font-size:16px}
 .noir .vision-constellation{width:min(100%,470px);margin:12px auto -6px}
 .noir .noir-principles{margin-top:22px;font-size:13px}
 .noir .noir-principles li{gap:10px;padding-right:12px}
 .noir .noir-principles li+li{padding-left:16px}
 .noir .principle-symbol{flex-basis:34px;width:34px;height:34px}
}
@media(max-width:760px){
 .noir .noir-vision{padding-top:68px;padding-bottom:52px}
 .noir .noir-vision h2{font-size:clamp(29px,8.5vw,40px);line-height:1.16;letter-spacing:-.9px;margin:24px 0 26px}
 .noir .noir-vision-copy{font-size:15px}
 .noir .vision-constellation{width:calc(100% + 24px);max-width:400px;margin:20px -12px 0}
 .noir .noir-principles{grid-template-columns:1fr;gap:0;margin-top:15px;padding-top:0;font-size:14px}
 .noir .noir-principles li,.noir .noir-principles li+li{padding:17px 0;gap:18px;border-left:0;border-bottom:1px solid #d9d1bd}
 .noir .principle-symbol{flex-basis:38px;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.noir .constellation-flow,.noir .constellation-core-halo{animation:none!important}}

@media(min-width:1001px){
 .noir .vision-composition{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
 .noir .vision-story{grid-column:2;grid-row:1}
 .noir .vision-constellation{grid-column:1;grid-row:1;margin:-24px -12px -10px -32px}
}