.elementor-186 .elementor-element.elementor-element-e36b705{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */<!-- ============================================================
     NUFF STUDIO — NATIVE BLOG POST TEMPLATE (SINGLE HTML WIDGET)
     ============================================================ -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=JetBrains+Mono:wght@400;500&display=swap');

.nuff-post-wrap {
  background-color: #0a0a0b;
  min-height: 100vh;
  padding: 80px 24px 100px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nuff-post-container {
  max-width: 760px;
  margin: 0 auto;
  color: #efece4;
}
.nuff-crumbs {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a877f;
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
}
.nuff-crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.nuff-crumbs a:hover { color: #ff5a1f; }
.nuff-crumbs .sep { color: #2a2a2d; }

.nuff-eyebrow {
  color: #ff5a1f;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.nuff-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: #efece4;
}
.nuff-dek {
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.45;
  color: #8a877f;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.nuff-hero {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #2a2a2d;
  margin-bottom: 40px;
  display: block;
}
.nuff-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid #2a2a2d;
  border-bottom: 1px solid #2a2a2d;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: #8a877f;
  margin-bottom: 48px;
}
.nuff-meta strong { color: #efece4; font-weight: 500; }
.nuff-meta .dot { color: #2a2a2d; }

.nuff-body {
  font-size: 18px;
  line-height: 1.75;
  color: #efece4;
}
.nuff-body p { margin-bottom: 1.5em; opacity: 0.95; }
.nuff-body h2 { font-size: 32px; margin: 2em 0 0.5em; font-weight: 600; letter-spacing: -0.03em; color: #efece4; }
.nuff-body h3 { font-size: 24px; margin: 1.6em 0 0.4em; font-weight: 600; letter-spacing: -0.02em; color: #efece4; }
.nuff-body h4 { font-size: 20px; margin: 1.4em 0 0.3em; font-weight: 600; color: #efece4; }
.nuff-body a { color: #ff5a1f; text-decoration: underline; text-underline-offset: 3px; }
.nuff-body ul, .nuff-body ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.nuff-body li { margin-bottom: 0.5em; }
.nuff-body li::marker { color: #ff5a1f; }
.nuff-body blockquote {
  border-left: 3px solid #ff5a1f;
  padding-left: 24px;
  margin: 2em 0;
  font-style: italic;
  font-size: 22px;
  color: #efece4;
}
.nuff-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 2em 0; }

.nuff-cta {
  margin-top: 64px;
  padding: 40px;
  border: 1px solid #2a2a2d;
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  text-align: center;
}
.nuff-cta h3 { font-size: 26px; margin-bottom: 12px; color: #efece4; letter-spacing: -0.02em; }
.nuff-cta p { color: #8a877f; margin-bottom: 24px; font-size: 16px; }
.nuff-btn {
  display: inline-block;
  background: #ff5a1f;
  color: #0a0a0b !important;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 99px;
  text-decoration: none !important;
  transition: transform 0.2s;
}
.nuff-btn:hover { transform: translateY(-2px); }

.nuff-author {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 32px;
  margin-top: 32px;
  border: 1px solid #2a2a2d;
  border-radius: 16px;
}
.nuff-avatar {
  width: 64px; height: 64px;
  background: #ff5a1f; color: #0a0a0b;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.nuff-author-info h4 { font-size: 18px; margin-bottom: 4px; color: #efece4; }
.nuff-author-info .role { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; color: #ff5a1f; letter-spacing: 0.1em; margin-bottom: 8px; }
.nuff-author-info p { font-size: 14px; color: #8a877f; line-height: 1.5; margin: 0; }

/* Fallback layout */
.nuff-fallback { padding: 100px 20px; text-align: center; color: #8a877f; }
<\/style>

<div class="nuff-post-wrap">
  <div class="nuff-post-container" id="nuff-render-target">
    <div class="nuff-fallback">Loading post data...</div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var target = document.getElementById("nuff-render-target");
    
    // 1. Get JSON-LD data (Elementor Pro injects this)
    var jsonLdData = null;
    var scripts = document.querySelectorAll('script[type="application/ld+json"]');
    for (var i = 0; i < scripts.length; i++) {
        try {
            var data = JSON.parse(scripts[i].innerHTML);
            var items = data['@graph'] || [data];
            for (var j = 0; j < items.length; j++) {
                if (items[j]['@type'] === 'BlogPosting' || items[j]['@type'] === 'Article') {
                    jsonLdData = items[j];
                    break;
                }
            }
            if (jsonLdData) break;
        } catch(e) {}
    }

    // 2. Extract Variables
    var title = jsonLdData ? jsonLdData.headline : document.title;
    var desc = jsonLdData ? jsonLdData.description : "";
    var dateStr = jsonLdData ? jsonLdData.datePublished : "";
    var image = jsonLdData && jsonLdData.image ? (typeof jsonLdData.image === 'string' ? jsonLdData.image : jsonLdData.image.url) : "";
    
    // Format Date
    var dateObj = new Date(dateStr);
    var displayDate = isNaN(dateObj) ? "" : dateObj.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });

    // 3. Extract Content
    // We look for Elementor's content wrapper or standard WordPress content
    var contentNode = document.querySelector('.elementor-widget-theme-post-content .elementor-widget-container') || 
                      document.querySelector('.elementor-widget-theme-post-content') ||
                      document.querySelector('.entry-content') || 
                      document.querySelector('.post-content');

    var bodyHtml = "";
    if (contentNode) {
        bodyHtml = contentNode.innerHTML;
        // Remove Elementor comments if any
        bodyHtml = bodyHtml.replace(/<!--[\s\S]*?-->/g, '');
    } else {
        // If the content is completely missing, try to find the raw WordPress text
        var wpContent = document.querySelector('.elementor-widget-theme-post-content p');
        bodyHtml = wpContent ? wpContent.outerHTML : "<p><em>No content found. Make sure you are editing this post in the WordPress text editor, not Elementor.</em></p>";
    }

    // 4. Build HTML
    var html = `
        <nav class="nuff-crumbs">
            <a href="https://nuffstudio.com/">Nuff Studio</a>
            <span class="sep">/</span>
            <a href="https://nuffstudio.com/blog">Blog</a>
        </nav>

        <div class="nuff-eyebrow">MVP Development</div>
        <h1 class="nuff-title">${title}</h1>
        <p class="nuff-dek">${desc}</p>
        
        ${image ? `<img src="${image}" class="nuff-hero" alt="${title}">` : ''}

        <div class="nuff-meta">
            <span>By <strong>Jason Vic</strong></span>
            <span class="dot">·</span>
            <span>Senior Project Coordinator</span>
            <span class="dot">·</span>
            <time>${displayDate}</time>
        </div>

        <div class="nuff-body">
            ${bodyHtml}
        </div>

        <div class="nuff-cta">
            <h3>Got an idea you want to test?</h3>
            <p>We sign your NDA first, then scope the smallest version that proves whether it works. Focused MVPs ship in about ten days.</p>
            <a class="nuff-btn" href="https://nuffstudio.com/#contact">Start a conversation</a>
        </div>

        <div class="nuff-author">
            <div class="nuff-avatar">J</div>
            <div class="nuff-author-info">
                <h4>Jason Vic</h4>
                <div class="role">Senior Project Coordinator, Nuff Studio</div>
                <p>Jason runs project delivery at Nuff Studio. He has shipped mobile apps, web platforms and AI tools for founders across nine time zones. He answers email in a straight line.</p>
            </div>
        </div>
    `;

    // 5. Render
    target.innerHTML = html;
});
</script>/* End custom CSS */