{
    "version": "https://jsonfeed.org/version/1",
    "title": "Clouty Skies Research Institute",
    "description": "",
    "home_page_url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute",
    "feed_url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/feed.json",
    "user_comment": "",
    "icon": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/media/website/Untitled-3.png",
    "author": {
        "name": "Clouty Skies"
    },
    "items": [
        {
            "id": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/upcoming-what-is-the-best-root-beer/",
            "url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/upcoming-what-is-the-best-root-beer/",
            "title": "(Upcoming) What is the Best Root Beer?",
            "summary": "Today I’m proud to introduce Project Root. In the continued effort within the Clouty Skies Research Institute to determine the…",
            "content_html": "<p>Today I’m proud to introduce <strong>Project Root</strong>. In the continued effort within the Clouty Skies Research Institute to determine the best soda within a given flavor profile, we have moved on to root beer as our next study candidate. This phase evaluates <strong>24 root beer products</strong> using the same standardized framework applied in Project Cream: an equal-weight, eight-metric scoring matrix with a maximum of 5 points per metric.</p>\n<p>The evaluated metrics are <strong>Creaminess, Overall Taste, Smoothness, Design, Opening Experience, Ingredients, Price,</strong> and <strong>Availability</strong>.</p>\n<p>The brands surveyed in <strong>Project Root</strong>, based strictly on the collected data, are <strong>A&amp;W, A&amp;W Sundae, Great Value, Signature Select, Sprecher’s, Jones, Poppi, Shasta, Nixie, Zevia, IBC, Teddy’s, Cove, Olipop, Elixir, River City, Virgil’s, Harvey’s, Abita, Daytrip, Live, Root Beer Wrath, Mug,</strong> and <strong>Barq’s</strong>.</p>\n<!-- BAR CHART BLURB -->\n<p class=\"msg msg--highlight \"><strong>Overall Rankings:</strong> This bar chart visualizes the total composite score for each root beer, calculated as the sum of all eight equally weighted evaluation metrics. Higher bars indicate stronger overall performance within the dataset.</p>\n<!-- BAR CHART -->\n<div class=\"post__iframe\"><iframe loading=\"lazy\" height=\"743\" style=\"width: 0; min-width: 100% !important; border: none;\" title=\"Project Root: Root Beer Rankings (Standardized 8-Metric Study)\" aria-label=\"Bar Chart\" id=\"datawrapper-chart-FUBny\" src=\"https://datawrapper.dwcdn.net/FUBny/1/\" scrolling=\"no\" frameborder=\"0\" data-external=\"1\"></iframe></div>\n<!-- TABLE BLURB -->\n<p class=\"msg msg--highlight \"><strong>Full Metric Breakdown:</strong> This table presents the complete scoring matrix for all evaluated products, showing individual metric scores and final totals. Values are displayed on a standardized 0–5 scale for direct comparison across brands.</p>\n<!-- FULL DATA TABLE -->\n<div class=\"post__iframe\"><iframe loading=\"lazy\" height=\"643\" style=\"width: 0; min-width: 100% !important; border: none;\" title=\"Project Root: Root Beer Comparative Analysis (Standardized 8-Metric Matrix)\" aria-label=\"Table\" id=\"datawrapper-chart-uDLS9\" src=\"https://datawrapper.dwcdn.net/uDLS9/2/\" scrolling=\"no\" frameborder=\"0\" data-external=\"1\"></iframe></div>\n<p class=\"p1\"><strong>Conclusion</strong></p>\n<p class=\"p2\">Project Root demonstrates clear performance separation within the root beer category, with a small number of products consistently outperforming peers across the full eight-metric matrix while others show strength in isolated areas but weaker overall balance. These results reinforce the value of standardized, equal-weight evaluation when comparing consumer products within a single flavor profile.</p>\n<p class=\"p2\">For a full breakdown of the methodology, tasting process, and additional context behind the scores, watch the accompanying YouTube video. Future studies and expanded datasets will be published through the Clouty Skies Research Institute, with ongoing updates and new category analyses to follow.</p>\n<p>\n<script type=\"text/javascript\">\n\t\twindow.addEventListener(\"message\", function(event) {\n\t\t\t\t\tif (event.data[\"datawrapper-height\"]) {\n\t\t\t\t\t\tvar iframes = document.querySelectorAll(\"iframe\");\n\t\t\t\t\t\tfor (var chartId in event.data[\"datawrapper-height\"]) {\n\t\t\t\t\t\t\tfor (var i = 0; i < iframes.length; i++) {\n\t\t\t\t\t\t\t\tif (iframes[i].contentWindow === event.source) {\n\t\t\t\t\t\t\t\t\tiframes[i].style.height =\n\t\t\t\t\t\t\t\t\t\tevent.da\n\t</script>\n</p>",
            "author": {
                "name": "Clouty Skies"
            },
            "tags": [
                   "Research",
                   "In Progress",
                   "CSRI"
            ],
            "date_published": "2025-12-17T19:05:46-08:00",
            "date_modified": "2025-12-20T21:10:15-08:00"
        },
        {
            "id": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/what-is-the-best-cream-soda/",
            "url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/what-is-the-best-cream-soda/",
            "title": "What is The Best Cream Soda?",
            "summary": "{ \"imports\": { \"lucide-react\": \"https://esm.sh/lucide-react@^0.562.0\", \"framer-motion\": \"https://esm.sh/framer-motion@^12.23.26\", \"@react-three/fiber\": \"https://esm.sh/@react-three/fiber@^9.4.2\", \"@react-three/drei\": \"https://esm.sh/@react-three/drei@^10.7.7\", \"three\": \"https://esm.sh/three@^0.182.0\", \"vite\": \"https://esm.sh/vite@^7.3.0\", \"@vitejs/plugin-react\": \"https://esm.sh/@vitejs/plugin-react@^5.1.2\", \"react\": \"https://esm.sh/react@^19.2.3\", \"react-dom/\":&hellip;",
            "content_html": "<p> </p>\n<!-- Tailwind CSS -->\n<p>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n</p>\n<!-- Icons -->\n<p>\n<script src=\"https://unpkg.com/lucide@latest\"></script>\n</p>\n<!-- Fonts -->\n<p> </p>\n<!-- Custom Config -->\n<p>\n<script>\n      tailwind.config = {\n        theme: {\n          extend: {\n            fontFamily: {\n              serif: ['\"Playfair Display\"', 'serif'],\n              sans: ['\"Inter\"', 'sans-serif'],\n              mono: ['\"Space Mono\"', 'monospace'],\n            },\n            colors: {\n              cream: {\n                50: '#FFFCF5',\n                100: '#FFF8E1',\n                200: '#FFE0B2',\n                900: '#3E2723',\n              },\n              soda: {\n                light: '#D4AF37', // Gold\n                base: '#B8860B',  // Dark Gold\n                dark: '#4B3621',  // Dark Brown\n              }\n            }\n          }\n        }\n      }\n    </script>\n<script type=\"importmap\">\n{\n  \"imports\": {\n    \"lucide-react\": \"https://esm.sh/lucide-react@^0.562.0\",\n    \"framer-motion\": \"https://esm.sh/framer-motion@^12.23.26\",\n    \"@react-three/fiber\": \"https://esm.sh/@react-three/fiber@^9.4.2\",\n    \"@react-three/drei\": \"https://esm.sh/@react-three/drei@^10.7.7\",\n    \"three\": \"https://esm.sh/three@^0.182.0\",\n    \"vite\": \"https://esm.sh/vite@^7.3.0\",\n    \"@vitejs/plugin-react\": \"https://esm.sh/@vitejs/plugin-react@^5.1.2\",\n    \"react\": \"https://esm.sh/react@^19.2.3\",\n    \"react-dom/\": \"https://esm.sh/react-dom@^19.2.3/\",\n    \"react/\": \"https://esm.sh/react@^19.2.3/\"\n  }\n}\n</script>\n</p>\n<!-- Hero Section --><header class=\"relative h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-cream-50 via-cream-100 to-amber-50 text-soda-dark\"><!-- Bubbles -->\n<div id=\"bubbles\" class=\"bubble-container\"></div>\n<div class=\"relative z-10 container mx-auto px-6 text-center\">\n<div class=\"inline-block mb-6 px-4 py-1 border border-amber-200 bg-white/60 text-amber-700 text-xs tracking-[0.3em] uppercase font-bold rounded-full backdrop-blur-md shadow-sm\">Clouty Skies Research Institute</div>\n<h1 class=\"font-serif text-6xl md:text-8xl lg:text-9xl font-bold leading-none mb-6 text-amber-600 drop-shadow-sm\">Project<br><span class=\"text-soda-dark opacity-90 italic\">Cream</span></h1>\n<div class=\"w-32 h-1 bg-gradient-to-r from-transparent via-amber-400 to-transparent mx-auto mb-8\"> </div>\n<p class=\"max-w-2xl mx-auto text-lg md:text-xl text-stone-600 font-light leading-relaxed mb-12 tracking-wide\">An objective, unbiased dissertation on the performance, physics, and yumminess of the modern cream soda landscape.</p>\n<div class=\"flex justify-center\"><a href=\"#report\" class=\"group flex flex-col items-center gap-2 text-sm font-bold text-amber-800/60 hover:text-amber-700 transition-colors cursor-pointer uppercase tracking-widest\"> Access Report <i data-lucide=\"flask-conical\"></i> </a></div>\n</div>\n</header><main id=\"report\"><!-- Intro & Methodology -->\n<section class=\"py-24 bg-white relative\">\n<div class=\"container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center\">\n<div class=\"animate-on-scroll\">\n<h2 class=\"font-serif text-5xl mb-6 text-soda-dark\">The Methodology</h2>\n<p class=\"text-lg text-stone-600 leading-relaxed mb-6 font-serif\">We utilized an <strong class=\"text-amber-700\">eight-point standardized matrix</strong> to evaluate the sensory and economic factors of 13 distinct brands.</p>\n<div class=\"grid grid-cols-2 gap-4 text-sm font-bold text-soda-base uppercase tracking-wider\">\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Creaminess</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Overall Taste</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Smoothness</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Opening Exp.</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Design</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Ingredients</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Price</div>\n<div class=\"p-4 bg-stone-50 border border-amber-100 rounded-lg shadow-sm hover:shadow-md transition-shadow\">Availability</div>\n</div>\n</div>\n<div class=\"animate-on-scroll bg-cream-50 p-8 rounded-2xl shadow-xl border border-amber-100\">\n<h3 class=\"font-bold text-soda-dark mb-4 flex items-center gap-2\"><i data-lucide=\"clipboard-list\" class=\"text-amber-600\"></i> Scoring Rubric</h3>\n<ul class=\"space-y-4 text-stone-600\">\n<li class=\"flex justify-between items-center border-b border-amber-200/50 pb-2\">Max Points Per Metric<span class=\"font-mono font-bold\">5.0</span></li>\n<li class=\"flex justify-between items-center border-b border-amber-200/50 pb-2\">Total Possible Score<span class=\"font-mono font-bold text-amber-600\">40.0</span></li>\n</ul>\n<div class=\"mt-6 p-4 bg-white border-l-4 border-amber-500 text-sm text-amber-900 italic shadow-sm\">\"The primary objective was to move beyond subjective preference by quantifying the trade-off inherent in the market.\"</div>\n</div>\n</div>\n</section>\n<!-- The Findings (Charts) -->\n<section class=\"py-24 bg-stone-50 border-t border-amber-100\">\n<div class=\"container mx-auto px-6\">\n<div class=\"text-center mb-16 animate-on-scroll\"><span class=\"text-amber-600 font-bold tracking-widest text-xs uppercase\">Data Visualization</span>\n<h2 class=\"font-serif text-5xl mt-2 text-soda-dark\">Ranking the Foam</h2>\n</div>\n<!-- Main Bar Chart -->\n<div class=\"max-w-4xl mx-auto mb-24 animate-on-scroll bg-white p-6 rounded-xl shadow-xl border border-stone-200\"><div class=\"post__iframe\"><iframe loading=\"lazy\" height=\"447\" style=\"width: 0; min-width: 100% !important; border: none;\" title=\"Project Cream Results\" aria-label=\"Bar Chart\" id=\"datawrapper-chart-zn95y\" src=\"https://datawrapper.dwcdn.net/zn95y/1/\" scrolling=\"no\" frameborder=\"0\" data-external=\"1\"></iframe></div>\n<script type=\"text/javascript\">window.addEventListener(\"message\",function(a){if(void 0!==a.data[\"datawrapper-height\"]){var e=document.querySelectorAll(\"iframe\");for(var t in a.data[\"datawrapper-height\"])for(var r,i=0;r=e[i];i++)if(r.contentWindow===a.source){var d=a.data[\"datawrapper-height\"][t]+\"px\";r.style.height=d}}});</script>\n</div>\n<!-- Analysis Cards -->\n<div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-20 animate-on-scroll\">\n<div class=\"p-8 bg-white text-stone-800 rounded-xl shadow-md border border-stone-200\">\n<div class=\"text-amber-600 mb-4\"> </div>\n<h3 class=\"text-xl font-bold text-soda-dark mb-2\">Sugar is King</h3>\n<p class=\"text-sm opacity-80 leading-relaxed text-stone-600\">Superior sensory experiences (Creaminess, Taste) are overwhelmingly linked to traditional, caloric sweeteners like <strong class=\"text-amber-700\">Honey</strong> or <strong class=\"text-amber-700\">Cane Sugar</strong>.</p>\n</div>\n<div class=\"p-8 bg-white text-stone-800 rounded-xl shadow-md border border-stone-200\">\n<div class=\"text-stone-400 mb-4\"> </div>\n<h3 class=\"text-xl font-bold text-soda-dark mb-2\">The Functional Barrier</h3>\n<p class=\"text-sm opacity-80 leading-relaxed text-stone-600\">Zero-calorie alternatives consistently achieve high ingredient marks but fail dramatically in texture and flavor. Current technology cannot replicate the \"Cream\" profile.</p>\n</div>\n<div class=\"p-8 bg-white text-stone-800 rounded-xl shadow-md border border-stone-200\">\n<div class=\"text-amber-600 mb-4\"> </div>\n<h3 class=\"text-xl font-bold text-soda-dark mb-2\">Economy Paradox</h3>\n<p class=\"text-sm opacity-80 leading-relaxed text-stone-600\">Surprisingly, \"Great Value\" (Walmart) outperformed many mid-tier brands, proving that generic HFCS formulations often beat poorly executed \"healthy\" sodas.</p>\n</div>\n</div>\n<!-- Tier List -->\n<div class=\"max-w-5xl mx-auto animate-on-scroll\">\n<h3 class=\"font-serif text-3xl mb-8 text-center text-soda-dark\">The Official Hierarchy</h3>\n<div class=\"border-4 border-stone-200 bg-white rounded-lg overflow-hidden shadow-xl\"><!-- S Tier -->\n<div class=\"grid grid-cols-12 border-b border-stone-100 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-s flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-lg md:text-xl uppercase leading-tight\">Peak<br>Cream</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-amber-100 border border-amber-300 text-amber-900 px-4 py-2 rounded font-bold font-serif text-xl shadow-sm\">Sprecher’s</div>\n</div>\n</div>\n<!-- A Tier -->\n<div class=\"grid grid-cols-12 border-b border-stone-100 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-a flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-lg md:text-xl uppercase\">Pretty<br>Good</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-white border border-stone-200 text-stone-800 px-4 py-2 rounded font-bold font-serif text-xl shadow-sm\">IBC</div>\n</div>\n</div>\n<!-- B Tier -->\n<div class=\"grid grid-cols-12 border-b border-stone-100 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-b flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-lg md:text-xl uppercase\">Not<br>Bad</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-white border border-stone-200 text-stone-600 px-4 py-2 rounded font-bold text-lg shadow-sm\">Great Value</div>\n<div class=\"bg-white border border-stone-200 text-stone-600 px-4 py-2 rounded font-bold text-lg shadow-sm\">A&amp;W</div>\n<div class=\"bg-white border border-stone-200 text-stone-600 px-4 py-2 rounded font-bold text-lg shadow-sm\">Jones</div>\n</div>\n</div>\n<!-- C Tier -->\n<div class=\"grid grid-cols-12 border-b border-stone-100 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-c flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-lg md:text-xl uppercase\">Mid</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-white border border-stone-200 text-stone-500 px-4 py-2 rounded font-bold shadow-sm\">Nixie</div>\n<div class=\"bg-white border border-stone-200 text-stone-500 px-4 py-2 rounded font-bold shadow-sm\">Olipop</div>\n<div class=\"bg-white border border-stone-200 text-stone-500 px-4 py-2 rounded font-bold shadow-sm\">Poppi</div>\n<div class=\"bg-white border border-stone-200 text-stone-500 px-4 py-2 rounded font-bold shadow-sm\">Signature</div>\n</div>\n</div>\n<!-- D Tier -->\n<div class=\"grid grid-cols-12 border-b border-stone-100 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-d flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-lg md:text-xl uppercase\">Bad</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-white border border-stone-200 text-stone-400 px-4 py-2 rounded font-bold text-sm shadow-sm\">Zevia</div>\n<div class=\"bg-white border border-stone-200 text-stone-400 px-4 py-2 rounded font-bold text-sm shadow-sm\">Teddy's</div>\n<div class=\"bg-white border border-stone-200 text-stone-400 px-4 py-2 rounded font-bold text-sm shadow-sm\">Popwell</div>\n</div>\n</div>\n<!-- F Tier -->\n<div class=\"grid grid-cols-12 min-h-[100px]\">\n<div class=\"col-span-3 md:col-span-2 tier-f flex items-center justify-center p-4 text-center\"><span class=\"font-black text-stone-900 text-sm md:text-lg uppercase leading-tight\">Chemical<br>Warfare</span></div>\n<div class=\"col-span-9 md:col-span-10 bg-stone-50 p-4 flex flex-wrap items-center gap-4\">\n<div class=\"bg-white border border-red-200 text-red-500/80 px-4 py-2 rounded font-bold text-sm opacity-80 shadow-sm\">Cove</div>\n</div>\n</div>\n</div>\n</div>\n</div>\n</section>\n<!-- Raw Data Matrix -->\n<section class=\"py-24 bg-white border-t border-stone-200\">\n<div class=\"container mx-auto px-6 animate-on-scroll\">\n<h2 class=\"font-serif text-4xl mb-8 text-center text-soda-dark\">Raw Data Matrix</h2>\n<p class=\"text-center text-stone-500 mb-8 max-w-2xl mx-auto\">Full breakdown of the eight-point inspection. Scroll right to view all competitors.</p>\n<div class=\"overflow-x-auto rounded-xl shadow-lg border border-stone-200 bg-white\">\n<table class=\"w-full text-sm text-left text-stone-600\">\n<thead class=\"text-xs text-stone-700 uppercase bg-stone-50 border-b border-stone-200\">\n<tr>\n<th class=\"px-6 py-4 font-bold sticky left-0 bg-stone-50 z-10 shadow-sm\" scope=\"col\">Brand</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Creaminess</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Taste</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Smoothness</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Design</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Opening</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Ingredients</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Price</th>\n<th class=\"px-4 py-3 text-center\" scope=\"col\">Avail.</th>\n<th class=\"px-6 py-3 font-bold text-soda-dark text-right\" scope=\"col\">Total</th>\n</tr>\n</thead>\n<tbody id=\"raw-data-body\"><!-- JS injected rows --></tbody>\n</table>\n</div>\n</div>\n</section>\n<!-- Footer --><footer class=\"bg-cream-100 text-stone-600 py-16 border-t border-amber-200\">\n<div class=\"container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8\">\n<div class=\"text-center md:text-left\">\n<div class=\"text-soda-dark font-serif font-bold text-2xl mb-2 tracking-wider\">CRSI</div>\n<p class=\"text-xs max-w-sm\">Clouty Skies Research Institute. <br>Project Cream © 2025</p>\n</div>\n<div class=\"flex gap-6 text-sm font-bold uppercase tracking-widest text-amber-900/60\"><a href=\"mailto:contact@clouty-skies.com\" class=\"hover:text-amber-600 transition-colors\">Contact</a></div>\n</div>\n</footer></main><!-- Logic -->\n<p>\n<script>\n        lucide.createIcons();\n\n        // --- Data ---\n        const rankings = [\n            { name: \"Sprecher’s\", score: 31.0, data: [5, 5, 5, 4, 3, 4, 2, 3] },\n            { name: \"IBC\", score: 30.0, data: [4.5, 4, 5, 2.5, 3, 4, 3, 4] },\n            { name: \"Great Value\", score: 28.0, data: [4, 4.5, 4, 3, 4, 0, 5, 3.5] },\n            { name: \"A&W\", score: 25.0, data: [3, 3, 3, 5, 2, 0, 4, 5] },\n            { name: \"Jones\", score: 25.0, data: [4, 3.5, 3.5, 2, 3, 5, 2, 2] },\n            { name: \"Nixie\", score: 20.0, data: [3, 3.5, 2, 1, 2.5, 5, 2, 1] },\n            { name: \"Olipop\", score: 20.0, data: [1, 1.5, 1, 4, 3, 3, 2, 4.5] },\n            { name: \"Poppi\", score: 19.5, data: [0, 0, 1, 4, 3, 5, 2.5, 4] },\n            { name: \"Signature\", score: 17.5, data: [1, 1, 1, 0, 5, 2, 5, 2.5] },\n            { name: \"Zevia\", score: 15.0, data: [0, 1, 0, 2, 2, 5, 3, 2] },\n            { name: \"Teddy’s\", score: 13.5, data: [1, 2, 1, 2, 1, 1.5, 4, 1] },\n            { name: \"Popwell\", score: 12.0, data: [0, 0, 0, 3, 2, 3.5, 2.5, 1] },\n            { name: \"Cove\", score: 10.0, data: [0, 0, 0, 0, 2, 5, 2, 1] }\n        ];\n\n        // --- Render Table ---\n        const tableBody = document.getElementById('raw-data-body');\n        rankings.forEach(item => {\n            const tr = document.createElement('tr');\n            tr.className = \"bg-white border-b border-stone-100 hover:bg-stone-50 transition-colors\";\n            \n            let cells = `<th scope=\"row\" class=\"px-6 py-4 font-bold text-stone-900 sticky left-0 bg-white shadow-sm border-r border-stone-100\">${item.name}</th>`;\n            \n            item.data.forEach(val => {\n                const bg = val >= 4.5 ? 'bg-green-50 text-green-700' : (val <= 1 ? 'bg-red-50 text-red-700' : '');\n                cells += `<td class=\"px-4 py-3 text-center\"><span class=\"${bg} px-2 py-1 rounded\">${val}</span></td>`;\n            });\n            \n            cells += `<td class=\"px-6 py-3 text-right font-bold text-soda-dark\">${item.score}</td>`;\n            tr.innerHTML = cells;\n            tableBody.appendChild(tr);\n        });\n\n        // --- Animations ---\n        // Bubbles\n        const bubbleContainer = document.getElementById('bubbles');\n        const bubbleCount = 30;\n        for (let i = 0; i < bubbleCount; i++) {\n            const bubble = document.createElement('div');\n            bubble.className = 'bubble';\n            const size = Math.random() * 20 + 5;\n            bubble.style.width = `${size}px`;\n            bubble.style.height = `${size}px`;\n            bubble.style.left = `${Math.random() * 100}%`;\n            bubble.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);\n            bubble.style.setProperty('--sway', `${Math.random() * 100 - 50}px`);\n            bubble.style.animationDelay = `${Math.random() * 5}s`;\n            bubbleContainer.appendChild(bubble);\n        }\n\n        // Scroll Observer\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('visible');\n                }\n            });\n        }, { threshold: 0.1 });\n\n        document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));\n\n    </script>\n</p>",
            "author": {
                "name": "Clouty Skies"
            },
            "tags": [
                   "Research",
                   "Project Cream",
                   "CSRI"
            ],
            "date_published": "2025-12-05T00:24:53-08:00",
            "date_modified": "2025-12-26T23:07:40-08:00"
        },
        {
            "id": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/the-official-crsi-wigga-meter/",
            "url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/the-official-crsi-wigga-meter/",
            "title": "The Official CRSI Wigga-Meter",
            "summary": "{ \"imports\": { \"lucide-react\": \"https://esm.sh/lucide-react@^0.562.0\", \"framer-motion\": \"https://esm.sh/framer-motion@^12.23.26\", \"@react-three/fiber\": \"https://esm.sh/@react-three/fiber@^9.4.2\", \"@react-three/drei\": \"https://esm.sh/@react-three/drei@^10.7.7\", \"three\": \"https://esm.sh/three@^0.182.0\", \"vite\": \"https://esm.sh/vite@^7.3.0\", \"@vitejs/plugin-react\": \"https://esm.sh/@vitejs/plugin-react@^5.1.2\", \"react\": \"https://esm.sh/react@^19.2.3\", \"react-dom/\":&hellip;",
            "content_html": "<p> </p>\n<!-- Tailwind CSS (No build step required) -->\n<p>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n</p>\n<!-- Icons -->\n<p>\n<script src=\"https://unpkg.com/lucide@latest\"></script>\n</p>\n<!-- Fonts -->\n<p> </p>\n<!-- Configuration & Custom CSS -->\n<p>\n<script>\n      tailwind.config = {\n        theme: {\n          extend: {\n            fontFamily: {\n              serif: ['\"Playfair Display\"', 'serif'],\n              sans: ['\"Inter\"', 'sans-serif'],\n            },\n            colors: {\n              nobel: {\n                gold: '#C5A059',\n                dark: '#1a1a1a',\n                cream: '#F9F8F4',\n                red: '#FF0000',\n                yellow: '#FFFF00',\n              }\n            }\n          }\n        }\n      }\n    </script>\n<script type=\"importmap\">\n{\n  \"imports\": {\n    \"lucide-react\": \"https://esm.sh/lucide-react@^0.562.0\",\n    \"framer-motion\": \"https://esm.sh/framer-motion@^12.23.26\",\n    \"@react-three/fiber\": \"https://esm.sh/@react-three/fiber@^9.4.2\",\n    \"@react-three/drei\": \"https://esm.sh/@react-three/drei@^10.7.7\",\n    \"three\": \"https://esm.sh/three@^0.182.0\",\n    \"vite\": \"https://esm.sh/vite@^7.3.0\",\n    \"@vitejs/plugin-react\": \"https://esm.sh/@vitejs/plugin-react@^5.1.2\",\n    \"react\": \"https://esm.sh/react@^19.2.3\",\n    \"react-dom/\": \"https://esm.sh/react-dom@^19.2.3/\",\n    \"react/\": \"https://esm.sh/react@^19.2.3/\"\n  }\n}\n</script>\n</p>\n<!-- Hero Section --><header class=\"relative h-screen flex items-center justify-center overflow-hidden bg-white\"><!-- Static/Simple Scene -->\n<div class=\"scene-container\">\n<div class=\"floating-item delay-1 text-6xl\" style=\"top: 20%; left: 15%;\">🍔</div>\n<div class=\"floating-item delay-2 text-7xl\" style=\"top: 65%; left: 80%;\">🏀</div>\n<div class=\"floating-item delay-3 text-5xl\" style=\"top: 25%; left: 75%;\">🧢</div>\n<div class=\"floating-item delay-1 text-6xl\" style=\"top: 15%; left: 55%; filter: drop-shadow(0 0 10px gold);\">⛓️</div>\n</div>\n<div class=\"relative z-10 container mx-auto px-6 text-center text-stone-900\">\n<div class=\"inline-block mb-6 px-4 py-1 border border-red-200 bg-red-50 text-red-600 text-xs tracking-[0.3em] uppercase font-bold rounded-full\">Official Publication</div>\n<h1 class=\"font-serif text-5xl md:text-7xl lg:text-9xl font-bold leading-tight mb-6\">The Official <br><span class=\"text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-yellow-600\">Wigga-Meter</span></h1>\n<p class=\"max-w-2xl mx-auto text-lg md:text-xl text-stone-600 font-light leading-relaxed mb-12\">A conceptual framework designed to quantify and analyze the probability of encountering specific cultural phenomena.</p>\n<div class=\"flex justify-center\"><a href=\"#about\" class=\"group flex flex-col items-center gap-2 text-sm font-bold text-stone-500 hover:text-red-600 transition-colors cursor-pointer uppercase tracking-widest\"> Begin Analysis <i data-lucide=\"arrow-down\"></i> </a></div>\n</div>\n</header><main><!-- Definition -->\n<section id=\"about\" class=\"py-24 bg-white relative overflow-hidden\">\n<div class=\"absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-[0.03] select-none\">\n<div class=\"text-[20vw] font-serif font-bold text-stone-900 leading-none whitespace-nowrap ml-[-10vw]\">CRSI CRSI</div>\n</div>\n<div class=\"container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-12 gap-12 items-start relative z-10\">\n<div class=\"md:col-span-5 animate-on-scroll\">\n<div class=\"inline-block mb-3 text-xs font-bold tracking-widest text-red-600 uppercase\">Framework Definition</div>\n<h2 class=\"font-serif text-5xl mb-6 leading-tight text-stone-900\">What is a <br><span class=\"italic text-stone-500\">Wigger?</span></h2>\n<div class=\"w-24 h-1.5 bg-gradient-to-r from-red-500 to-yellow-500 mb-8\"> </div>\n<p class=\"text-lg text-stone-600 leading-relaxed mb-6\">A suburban white individual who adopts the aesthetic of urban rap culture, often identifying with cities like the Bronx or Atlanta based solely on lyrical exposure.</p>\n<div class=\"bg-[#F5F4F0] p-8 rounded-2xl border border-stone-200 shadow-inner\">\n<h3 class=\"font-serif text-2xl mb-4 text-stone-900\">How It Works</h3>\n<p class=\"text-stone-700 mb-4 leading-relaxed\">The <strong class=\"text-red-600\">Wigga-Meter</strong> employs a standardized <strong>1-25 scale</strong> to quantify the relative intensity of the <em>WiggerFactor</em>.</p>\n</div>\n</div>\n<div class=\"md:col-span-7 flex flex-col gap-6 animate-on-scroll\">\n<div class=\"w-full rounded-2xl overflow-hidden shadow-2xl border-4 border-stone-900 bg-stone-900 relative aspect-video\"><div class=\"post__iframe\"><iframe loading=\"lazy\" class=\"w-full h-full\" src=\"https://www.youtube-nocookie.com/embed/1C6Xo03GQJk?si=K-1Wa6COXrlMBjuf\" title=\"Official Overview Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen=\"allowfullscreen\"></iframe></div></div>\n<div class=\"text-center\">\n<p class=\"text-xs font-bold uppercase tracking-widest text-stone-400\">Official Video Briefing</p>\n</div>\n</div>\n</div>\n</section>\n<!-- Data Points -->\n<section id=\"data\" class=\"py-24 bg-[#F5F4F0] border-t border-stone-200\">\n<div class=\"container mx-auto px-6 text-center animate-on-scroll\">\n<div class=\"inline-block px-3 py-1 bg-stone-200 text-stone-600 text-xs font-bold tracking-widest uppercase rounded-full mb-6\">Methodology</div>\n<h2 class=\"font-serif text-4xl md:text-5xl mb-12 text-stone-900\">The Data Points</h2>\n<div class=\"flex flex-col items-center p-8 bg-white rounded-xl shadow-lg border border-stone-200 my-8 max-w-4xl mx-auto\">\n<h3 class=\"font-serif text-2xl mb-6 text-stone-900 font-bold\">Variable Definitions</h3>\n<div class=\"flex flex-wrap justify-center gap-2 mb-8\"><button class=\"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-red-600 text-white shadow-md transform scale-105\" data-tab=\"NWAL\">NWAL</button> <button class=\"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-stone-100 text-stone-500 hover:bg-stone-200\" data-tab=\"WEC\">WEC</button> <button class=\"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-stone-100 text-stone-500 hover:bg-stone-200\" data-tab=\"BSA\">BSA</button> <button class=\"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-stone-100 text-stone-500 hover:bg-stone-200\" data-tab=\"FFP\">FFP</button></div>\n<div id=\"tab-content-container\" class=\"text-center max-w-lg p-6 bg-stone-50 rounded-lg border border-stone-100 min-h-[150px] flex flex-col justify-center items-center transition-all duration-300\">\n<div id=\"tab-icon\" class=\"text-4xl mb-4\">👀</div>\n<h4 id=\"tab-title\" class=\"text-xl font-bold text-stone-900 mb-3\">Natural Wigger Appearance Likelihood</h4>\n<p id=\"tab-desc\" class=\"text-stone-600 leading-relaxed font-serif\">Quantifies the likelihood of an organic encounter in a public setting.</p>\n</div>\n</div>\n</div>\n</section>\n<!-- Results -->\n<section id=\"results\" class=\"py-24 bg-white relative\">\n<div class=\"container mx-auto px-6\">\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12\">\n<div class=\"lg:col-span-8 animate-on-scroll\">\n<div class=\"p-8 bg-stone-900 text-stone-100 rounded-xl my-8 border border-stone-800 shadow-2xl\">\n<h3 class=\"font-serif text-3xl text-white mb-6\">WiggerFactor Distribution</h3>\n<div id=\"rankings-chart\" class=\"space-y-3\"><!-- Chart Items injected via JS --></div>\n</div>\n</div>\n<div class=\"lg:col-span-4 flex flex-col justify-center animate-on-scroll\">\n<h3 class=\"font-serif text-3xl mb-4 text-stone-900\">The Findings</h3>\n<p class=\"text-stone-600 leading-relaxed mb-6\">Our research indicates a high correlation between fast food establishments and high WiggerFactor scores.</p>\n</div>\n</div>\n</div>\n</section>\n<!-- Contribute -->\n<section id=\"contribute\" class=\"py-24 bg-stone-900 text-white text-center\">\n<div class=\"container mx-auto px-6\">\n<h2 class=\"font-serif text-4xl md:text-6xl mb-8\">Join the Research</h2>\n<div class=\"flex justify-center gap-6\"><a href=\"https://docs.google.com/forms/d/e/1FAIpQLSd3H9Iq86rqjDnYb471br7DDzhWLfwx_9GZNdX6VOsHlp-8Vw/viewform?usp=share_link&amp;ouid=107575648524359116699\" target=\"_blank\" class=\"px-8 py-4 bg-red-600 rounded-lg font-bold hover:bg-red-700 transition-colors\" rel=\"noopener\">Submit Feedback</a></div>\n</div>\n</section>\n<footer class=\"bg-white text-stone-600 py-16 border-t border-stone-200\">\n<div class=\"container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8\">\n<div class=\"text-center md:text-left\">\n<div class=\"font-serif font-bold text-2xl mb-2 tracking-wider text-stone-900\">CRSI</div>\n<p class=\"text-xs max-w-sm\">Clouty Skies Research Institute. Dedicated to the documentation of suburban cultural phenomena.</p>\n</div>\n<div class=\"flex flex-wrap justify-center gap-6 text-sm font-bold uppercase tracking-widest text-stone-500\"><a href=\"#about\" class=\"hover:text-red-600 transition-colors\">The Metric</a> <a href=\"#data\" class=\"hover:text-red-600 transition-colors\">Data Points</a> <a href=\"#results\" class=\"hover:text-red-600 transition-colors\">Results</a> <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSd3H9Iq86rqjDnYb471br7DDzhWLfwx_9GZNdX6VOsHlp-8Vw/viewform?usp=share_link&amp;ouid=107575648524359116699\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"hover:text-red-600 transition-colors\"> Contribute </a> <a href=\"mailto:contact@clouty-skies.com\" class=\"hover:text-red-600 transition-colors\">Contact</a></div>\n</div>\n<div class=\"text-center mt-12 text-[10px] text-stone-400\">© 2024 Clouty Skies Research Institute. All rights reserved.</div>\n</footer></main><!-- Interactive Scripts -->\n<p>\n<script>\n        lucide.createIcons();\n\n        // Tabs\n        const tabData = {\n            'NWAL': { title: \"Natural Wigger Appearance Likelihood\", desc: \"Quantifies the likelihood of an organic encounter in a public setting.\", icon: \"👀\" },\n            'WEC': { title: \"Wigger Employment Chance\", desc: \"Likelihood of employment within specific occupations.\", icon: \"👔\" },\n            'BSA': { title: \"Bluetooth Speaker Allowance\", desc: \"Tolerance for public music broadcasting.\", icon: \"🔊\" },\n            'FFP': { title: \"Free Food/Drink Probability\", desc: \"Likelihood of complimentary consumables.\", icon: \"🥤\" }\n        };\n\n        function switchTab(key) {\n            document.querySelectorAll('.tab-btn').forEach(btn => {\n                if(btn.dataset.tab === key) {\n                    btn.className = \"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-red-600 text-white shadow-md transform scale-105\";\n                } else {\n                    btn.className = \"tab-btn px-4 py-2 rounded-full font-bold text-sm tracking-widest transition-all duration-300 bg-stone-100 text-stone-500 hover:bg-stone-200\";\n                }\n            });\n            const data = tabData[key];\n            const container = document.getElementById('tab-content-container');\n            container.style.opacity = '0';\n            setTimeout(() => {\n                document.getElementById('tab-icon').textContent = data.icon;\n                document.getElementById('tab-title').textContent = data.title;\n                document.getElementById('tab-desc').textContent = data.desc;\n                container.style.opacity = '1';\n            }, 300);\n        }\n\n        // Attach event listeners after DOM load to ensure buttons exist\n        document.addEventListener('DOMContentLoaded', () => {\n             const tabs = document.querySelectorAll('.tab-btn');\n             tabs.forEach(tab => {\n                 tab.addEventListener('click', (e) => {\n                     const key = e.target.getAttribute('data-tab');\n                     if (key) switchTab(key);\n                 });\n             });\n        });\n\n        // Chart Data\n        const chartData = [\n            { name: \"White Castle Worker\", score: 22, color: \"#047857\" },\n            { name: \"Failed Rapper\", score: 22, color: \"#059669\" },\n            { name: \"Fast Food Place\", score: 22, color: \"#10b981\" },\n            { name: \"Gas Station Worker\", score: 21, color: \"#34d399\" },\n            { name: \"Basketball Court\", score: 20, color: \"#6ee7b7\" },\n        ];\n\n        const chartContainer = document.getElementById('rankings-chart');\n        chartData.forEach((item, index) => {\n            chartContainer.innerHTML += `\n                <div class=\"flex items-center gap-4 group\">\n                    <div class=\"w-40 text-right text-xs font-bold text-stone-400 uppercase tracking-tight\">${item.name}</div>\n                    <div class=\"flex-1 h-6 bg-stone-800 rounded-sm overflow-hidden relative\">\n                        <div class=\"bar-fill h-full absolute left-0 top-0\" style=\"background-color: ${item.color}; transition-delay: ${index * 0.1}s;\" data-width=\"${(item.score / 25) * 100}%\"></div>\n                    </div>\n                    <div class=\"w-8 font-mono text-sm font-bold text-[#C5A059]\">${item.score}</div>\n                </div>`;\n        });\n\n        // Animations\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    if (entry.target.id === 'rankings-chart') {\n                        document.querySelectorAll('.bar-fill').forEach(bar => bar.style.width = bar.dataset.width);\n                    } else {\n                        entry.target.classList.add('visible');\n                    }\n                }\n            });\n        }, { threshold: 0.2 });\n        \n        observer.observe(document.getElementById('rankings-chart'));\n        document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));\n    </script>\n</p>",
            "author": {
                "name": "Clouty Skies"
            },
            "tags": [
                   "Project Wigga-Meter"
            ],
            "date_published": "2025-12-05T00:12:25-08:00",
            "date_modified": "2025-12-26T22:22:27-08:00"
        },
        {
            "id": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/introducing-the-clouty-skies-research-institute/",
            "url": "https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/introducing-the-clouty-skies-research-institute/",
            "title": "Introducing the Clouty Skies Research Institute",
            "summary": "About the Clouty Skies Research Institute The Clouty Skies Research Institute is a data-driven platform dedicated to publishing structured, transparent&hellip;",
            "content_html": "<h2 data-path-to-node=\"3\">About the Clouty Skies Research Institute</h2>\n<p data-path-to-node=\"4\">The Clouty Skies Research Institute is a data-driven platform dedicated to publishing structured, transparent research on consumer products and other areas of interest. We specialize in exploring the cultural and consumer intersections that mainstream academics often overlook.<strong> While traditional institutions focus on theoretical abstractions, CSRI addresses interesting and engaging topics for everyday people</strong>, providing tangible data they can reference in their daily lives.</p>\n<p data-path-to-node=\"5\">Built to complement the work we do in videos and social media, the Institute website provides a centralized place to explore full breakdowns, standardized metrics, and datasets derived from systematic evaluation projects. Our methodology prioritizes \"Real-World Utility,\" ensuring that every data point serves a practical purpose for our audience.</p>\n<h3 data-path-to-node=\"6\">Current Research Pillars</h3>\n<ul data-path-to-node=\"7\">\n<li>\n<p data-path-to-node=\"7,0,0\"><strong><a href=\"https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/what-is-the-best-cream-soda/\" target=\"_blank\" rel=\"noopener noreferrer\">Project Cream</a>:</strong> A comprehensive sensory and market analysis where multiple cream soda brands were scored using consistent, multi-variable criteria to determine peak consumer value.</p>\n</li>\n<li>\n<p data-path-to-node=\"7,1,0\"><strong><a href=\"https://TheCloutySkies.github.io/Clouty-Skies-Research-Institute/the-official-crsi-wigga-meter/\" target=\"_blank\" rel=\"noopener noreferrer\">The Wigga-Meter</a>:</strong> An exploratory sociological framework designed to quantify encounter probabilities within specific environments. This project utilizes our proprietary <em><strong>WiggerFactor</strong></em> metrics to provide a standardized scale for demographic and environmental analysis.</p>\n</li>\n</ul>\n<h3 data-path-to-node=\"8\">Our Goal</h3>\n<p data-path-to-node=\"9\">The site is organized to make research accessible and verifiable, with sections for posts, projects, data, and background on our methodology. Our goal is to offer a resource where viewers and readers can dive deeper into the data behind the findings, follow ongoing research efforts, and engage with the process behind each project. By bridging the gap between rigorous data analysis and public engagement, we provide a new standard for independent research.</p>",
            "author": {
                "name": "Clouty Skies"
            },
            "tags": [
            ],
            "date_published": "2025-12-04T23:20:39-08:00",
            "date_modified": "2025-12-17T19:26:49-08:00"
        }
    ]
}