/* Reversible black palette experiment. Shiny effect independently implemented in CSS,
   inspired by the visual description of Designali Shiny Button on 21st.dev. */
:root{--paper:#090c0b;--ink:#f6f2e7;--orange:#ffad83;--line:#365048}
body{background:#090c0b;color:#f6f2e7;color-scheme:dark}
header{background:#101a17;border-bottom-color:#ffc85b}
.brand-strip{background:linear-gradient(100deg,#ffc85b,#ffad83,#8cddbd);color:#142b24}
.paths-banner{background:radial-gradient(ellipse at 85% 40%,#183a2d 0%,#0d1512 45%,#080a09 80%)}
.hero-copy>p,.sectionhead p,.guidecard p,.fine{color:#c3cec7}
.hero-copy .fine{color:#b3c3b9}.hero h1 em,.spark,.art-star{color:#ffad83}
.hero-art:before{background:radial-gradient(circle,#478e6940,#19382930 65%,transparent 70%)}
.hero figure,.mini-note,.hand-note{color:#173d32;color-scheme:light}
.orbit-label{color:#d6e8da}.hero-art .paper-back{background:#dc9272}
.banner-paths{opacity:1;mask-image:linear-gradient(90deg,#0007,#0004 25%,#000 65%)}
.ribbon{background:#14271f;color:#f7efdb}.ribbon span{color:#f7efdb}
.category-links a,.categorytile,.product,.year,.image-well,.app-icon{color:#173d32;color-scheme:light}
.categorytile p,.product p,.year p{color:#294c40}
.product .fine{color:#456051}.product .button{color:#fff}
.journal-feature{background:linear-gradient(120deg,#122a23,#152f2b)}
.journal-feature p{color:#ccd9cf}.app-row{border-color:#395047}
.notes,.closing{background:linear-gradient(130deg,#143027,#101e19);color:#f6f2e7}
.closing p,.notes p{color:#cbd9ca}.closing .button{color:#fff}
.help{background:#14211c}.help p{color:#cbd6ce}summary:hover{background:#274435}
.pageintro{background:radial-gradient(ellipse at top right,#214b354d,transparent 65%)}
.reading aside{background:#172d24;border-color:#ffc85b}.guidecard .eyebrow{color:#ffb38f}
footer{background:linear-gradient(120deg,#14291f,#242019 50%,#142d28);border-color:#ffad83;color:#f6f2e7}
footer>img{background:#fff8e9;border-radius:12px;padding:10px}
footer .fine{color:#c8d8ca}footer p>a:not(.social-link){background:#172d25;border-color:#57705c;color:#f6f2e7}
footer .social-etsy{color:#ffb085}footer .social-instagram{color:#ffa6c8}footer .social-pinterest{color:#ff9fa9}
.filters button{border-color:#87bda3;color:#ecf4ed}.filters button[aria-pressed=true]{background:#bde685;color:#153b2c}
/* Solid text surface with a moving, multicolor border and a brief light sweep. */
.button,footer .social-link,.filters button,.motion-control{
 position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;
 background:linear-gradient(#173b2e,#10291f) padding-box,linear-gradient(110deg,#72dcb9,#ffd36a,#ff9c82,#72dcb9) border-box;
 background-size:100% 100%,240% 100%;color:#fff8e8;box-shadow:0 4px 15px #0005;
 animation:shiny-border 7s ease-in-out infinite;
}
.button::after,footer .social-link::after,.filters button::after,.motion-control::after{
 content:'';position:absolute;inset:-80% -50%;pointer-events:none;
 background:linear-gradient(110deg,transparent 42%,#fff3 49%,transparent 56%);
 transform:translateX(-100%);opacity:0;
}
.button:hover::after,.button:focus-visible::after,footer .social-link:hover::after,footer .social-link:focus-visible::after,.filters button:hover::after,.motion-control:hover::after{animation:shiny-sweep .85s ease-out}
.button:hover,footer .social-link:hover,.motion-control:hover{background:linear-gradient(#24543e,#173b2e) padding-box,linear-gradient(110deg,#72dcb9,#ffd36a,#ff9c82,#72dcb9) border-box;box-shadow:0 6px 24px #84dfb530}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffd36a;outline-offset:5px;box-shadow:0 0 0 5px #090c0b}
@keyframes shiny-border{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}
@keyframes shiny-sweep{0%{transform:translateX(-80%);opacity:0}25%{opacity:1}100%{transform:translateX(80%);opacity:0}}
@media(prefers-reduced-motion:reduce){.button,footer .social-link,.filters button,.motion-control,.button::after,footer .social-link::after,.filters button::after,.motion-control::after{animation:none!important;transition:none!important}}

/* Keep the brand marks distinct from their cream letterforms. */
footer .social-etsy svg,header .header-social .social-etsy svg{color:#de682f!important}
footer .social-pinterest svg,header .header-social .social-pinterest svg{color:#df3448!important}
footer .social-instagram svg,header .header-social .social-instagram svg{color:#ffa6cb!important}
.social-link svg{flex-shrink:0;opacity:1}
.fitness-feature{padding-top:35px}.fitness-feature>img{border-radius:24px;border:1px solid #58745f;max-width:500px;justify-self:center;height:auto;object-fit:contain}
.fitness-thumb{width:85px;height:105px;object-fit:cover;border-radius:12px;flex-shrink:0;border:1px solid #638570}

/* Homepage: flowing artwork directly on a black ground. */
.paths-banner{background:#050706}
.paths-banner .banner-paths{opacity:1;mask-image:linear-gradient(90deg,#0009,#0006 30%,#000 65%);-webkit-mask-image:linear-gradient(90deg,#0009,#0006 30%,#000 65%)}
.paths-banner .hero-art:before{background:radial-gradient(circle,#307a5026,transparent 72%)}