@mintfolio/theme-verdant 0.2.0

package/pages/home.astro

@@ -0,0 +1,2049 @@
+---
+/** Verdant home renderer consumes only public site, post, and taxonomy data. */
+import PostCard from '../components/blog/PostCard.astro';
+import Base from '../layouts/Base.astro';
+import Image from '@mintfolio/core/components/Image.astro';
+import type { PageProps, HomePageData } from '@mintfolio/theme-api/astro';
+import type { VerdantSettings } from '../settings';
+
+interface Props extends PageProps<VerdantSettings, HomePageData> {}
+const { theme, page } = Astro.props;
+const posts = page.posts;
+const HOME_PAGE_SIZE = theme.settings.homePageSize;
+const latestActivityPosts = posts.slice(0, 3);
+const projectCount = theme.site.projects.length;
+const latestPost = posts[0] ?? null;
+const profileAvatar = theme.site.profile.avatar;
+const [allTags, allCategories] = await Promise.all([theme.taxonomy.tags(), theme.taxonomy.categories()]);
+const hotContentPosts = theme.settings.home.hotContent.items
+  .map((item) => {
+    const post = posts.find((entry) => entry.id === item.postId);
+    return post ? { post, image: item.image } : null;
+  })
+  .filter((entry): entry is NonNullable<typeof entry> => entry !== null)
+  .slice(0, 3);
+---
+
+<Base theme={theme} page={page}>
+  <!-- Hero Section -->
+  <section class="hero" id="hero" aria-label="欢迎区域">
+    <div class="hero-bg" aria-hidden="true">
+      <div class="hero-gradient"></div>
+      <div class="hero-pattern"></div>
+      <div class="hero-blob blob-1"></div>
+      <div class="hero-blob blob-2"></div>
+      <div class="hero-blob blob-3"></div>
+    </div>
+    <div class="hero-content">
+      <div class="hero-masthead" aria-hidden="true">
+        <span class="hero-wordmark">{theme.site.profile.name}<span class="wordmark-dot"></span></span>
+        <span>CODE · DESIGN · LIFE</span>
+      </div>
+      <div class="hero-shell">
+        <div class="hero-copy">
+          <span class="hero-kicker">Full-Stack Developer · Creative Coder</span>
+          <div class="hero-avatar-mobile" aria-hidden="true">
+            <Image src={profileAvatar} alt="" class="hero-avatar" width={108} height={108} />
+          </div>
+          <h1 class="hero-name">{theme.site.profile.name}</h1>
+          <p class="hero-tagline">{theme.site.profile.bio}</p>
+
+          <div class="hero-meta">
+            <span class="hero-location">{theme.site.profile.location}</span>
+            {latestPost && (
+              <span class="hero-update">
+                最近更新 {new Date(latestPost.publishedAt).toLocaleDateString('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric' })}
+              </span>
+            )}
+          </div>
+
+          <div class="hero-highlights">
+            <span class="hero-chip">写代码</span>
+            <span class="hero-chip">做设计</span>
+            <span class="hero-chip">记灵感</span>
+          </div>
+
+          <div class="hero-actions">
+            <a href="#content" class="hero-btn primary" aria-label="浏览文章">
+              <svg class="hero-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+              </svg>
+              <span class="hero-btn-label">浏览文章</span>
+            </a>
+            <a href={theme.urls.page('about')} class="hero-btn secondary" aria-label="关于我">
+              <svg class="hero-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M20 21a8 8 0 1 0-16 0"/>
+                <circle cx="12" cy="7" r="4"/>
+              </svg>
+              <span class="hero-btn-label">关于我</span>
+            </a>
+            <a href={theme.site.social[0]?.url} target="_blank" rel="noopener noreferrer" class="hero-btn secondary" aria-label="GitHub">
+              <svg class="hero-btn-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M12 0C5.37 0 0 5.49 0 12.26c0 5.42 3.44 10.02 8.2 11.64.6.12.82-.27.82-.59 0-.29-.01-1.07-.01-2.1-3.34.75-4.04-1.65-4.04-1.65-.55-1.42-1.34-1.8-1.34-1.8-1.09-.76.08-.75.08-.75 1.2.09 1.84 1.27 1.84 1.27 1.07 1.88 2.8 1.34 3.48 1.02.11-.8.42-1.35.77-1.66-2.67-.31-5.48-1.37-5.48-6.12 0-1.35.47-2.45 1.24-3.31-.12-.31-.54-1.57.12-3.26 0 0 1.01-.33 3.3 1.26a11.2 11.2 0 0 1 6 0c2.29-1.59 3.3-1.26 3.3-1.26.66 1.69.24 2.95.12 3.26.77.86 1.24 1.96 1.24 3.31 0 4.76-2.81 5.81-5.49 6.11.43.38.82 1.12.82 2.26 0 1.63-.01 2.95-.01 3.35 0 .33.22.72.83.59 4.76-1.62 8.2-6.22 8.2-11.64C24 5.49 18.63 0 12 0z"/>
+              </svg>
+              <span class="hero-btn-label">GitHub</span>
+            </a>
+          </div>
+        </div>
+
+        <div class="hero-panel">
+          <div class="hero-profile-card">
+            <span class="profile-sticker" aria-hidden="true">保持好奇 ✳</span>
+            <div class="hero-avatar-wrapper">
+              <Image src={profileAvatar} alt={theme.site.profile.name} class="hero-avatar" width={108} height={108} />
+            </div>
+            <p class="profile-note">一点代码，一点灵感。</p>
+            <p class="hero-signature">{theme.site.profile.signature}</p>
+          </div>
+
+          <div class="hero-metrics" aria-label="站点概览">
+            <div class="metric-card">
+              <span class="metric-value" data-countup={posts.length}>{posts.length}</span>
+              <span class="metric-label">已发布文章</span>
+            </div>
+            <div class="metric-card">
+              <span class="metric-value" data-countup={projectCount}>{projectCount}</span>
+              <span class="metric-label">长期项目</span>
+            </div>
+            <div class="metric-card">
+              <span class="metric-value" data-countup={allCategories.length}>{allCategories.length}</span>
+              <span class="metric-label">内容专题</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="scroll-indicator" role="button" tabindex="0" aria-label="向下滚动查看内容">
+        <span class="scroll-mouse" aria-hidden="true">
+          <span class="scroll-dot"></span>
+        </span>
+        <span class="scroll-text">向下滚动</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- Main Content -->
+  <section class="content-wrapper" id="content">
+    <button class="sidebar-drawer-toggle" id="sidebar-drawer-toggle" aria-label="打开侧边栏" aria-expanded="false">
+      <svg class="icon-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true">
+        <path d="M3 6h18M3 12h18M3 18h18"/>
+      </svg>
+      <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>
+
+    <div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
+
+    <div class="content-grid">
+      <!-- Left Sidebar -->
+      <aside class="sidebar sidebar-drawer" id="sidebar">
+        <div class="sidebar-card">
+          <div class="sidebar-header">
+            <div class="sidebar-avatar">
+              <Image src={profileAvatar} alt={theme.site.profile.name} width={80} height={80} />
+            </div>
+            <h2 class="sidebar-name">{theme.site.profile.name}</h2>
+            <p class="sidebar-bio">{theme.site.profile.bio}</p>
+          </div>
+
+          {theme.settings.sidebar.sections.contact && (
+            <div class="sidebar-section">
+              <h3 class="sidebar-section-title">联系方式</h3>
+              <div class="social-links">
+                {theme.site.social.map((link) => (
+                  <a href={link.url} target="_blank" rel="noopener noreferrer" class="social-link" aria-label={link.platform}>
+                  {link.icon === 'github' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                    </svg>
+                  )}
+                  {link.icon === 'mail' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                    </svg>
+                  )}
+                  {link.icon === 'twitter' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M22.46 6c-.85.38-1.78.64-2.75.76 1-.6 1.76-1.55 2.12-2.68-.93.55-1.96.95-3.06 1.17-.88-.94-2.13-1.53-3.51-1.53-2.66 0-4.81 2.16-4.81 4.81 0 .38.04.75.13 1.1-4-.2-7.58-2.11-9.96-5.02-.42.72-.66 1.56-.66 2.46 0 1.68.85 3.16 2.14 4.02-.79-.02-1.53-.24-2.18-.6v.06c0 2.35 1.67 4.31 3.88 4.76-.4.1-.83.16-1.27.16-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.39 4.61 3.43-1.69 1.32-3.83 2.1-6.15 2.1-.4 0-.8-.02-1.19-.07 2.19 1.4 4.78 2.22 7.57 2.22 9.07 0 14.02-7.52 14.02-14.02 0-.21 0-.42-.01-.63.96-.69 1.79-1.56 2.45-2.55z"/>
+                    </svg>
+                  )}
+                  {link.icon === 'linkedin' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 10.68H5.67V19h2.67v-8.32zM7 5.9a1.56 1.56 0 1 0 0 3.12A1.56 1.56 0 0 0 7 5.9zM18.33 14.22c0-2.5-1.33-3.66-3.1-3.66a2.67 2.67 0 0 0-2.42 1.34h-.03v-1.22H10.2V19h2.67v-4.12c0-1.08.2-2.13 1.54-2.13 1.31 0 1.33 1.22 1.33 2.2V19h2.67v-4.78z"/>
+                    </svg>
+                  )}
+                  {link.icon === 'bilibili' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M7.4 4.5 9.8 7h4.4l2.4-2.5a1 1 0 1 1 1.45 1.38L17.2 7H19a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h1.8L5.95 5.88A1 1 0 1 1 7.4 4.5ZM8 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-6.5 5h5a1 1 0 1 1 0 2h-5a1 1 0 0 1 0-2Z"/>
+                    </svg>
+                  )}
+                  {link.icon === 'juejin' && (
+                    <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                      <path d="M12 2 2.6 8.2l1.5 2.25L12 5.36l7.9 5.1 1.5-2.26L12 2Zm0 5.96L4.63 12.7l1.5 2.26L12 11.22l5.87 3.74 1.5-2.26L12 7.96Zm0 5.86-5.16 3.3L12 20.42l5.16-3.3L12 13.82Z"/>
+                    </svg>
+                  )}
+                  {!['github', 'mail', 'twitter', 'linkedin', 'bilibili', 'juejin'].includes(link.icon) && (
+                    <span>{link.platform.slice(0, 1).toUpperCase()}</span>
+                  )}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {theme.settings.sidebar.quote.enabled && (
+            <div class="sidebar-section">
+              <blockquote class="quote">
+                <p class="quote-text">"{theme.settings.sidebar.quote.text}"</p>
+                <cite class="quote-author">— {theme.settings.sidebar.quote.author}</cite>
+              </blockquote>
+            </div>
+          )}
+
+          {theme.settings.sidebar.sections.activity && (
+            <div class="sidebar-section">
+              <h3 class="sidebar-section-title">最近动态</h3>
+              <div class="activity-list">
+                {latestActivityPosts.map((post) => (
+                  <div class="activity-item">
+                    <span class="activity-dot"></span>
+                    <div class="activity-content">
+                      <p class="activity-text">
+                        <a class="activity-link" href={post.url} data-article-link>{post.title}</a>
+                      </p>
+                      <time class="activity-time">{new Date(post.publishedAt).toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {theme.settings.sidebar.sections.tools && (
+            <div class="sidebar-section">
+              <h3 class="sidebar-section-title">推荐工具</h3>
+              <div class="tools-list">
+                {theme.settings.sidebar.tools.map((tool) => (
+                  <a href={tool.url} target="_blank" rel="noopener noreferrer" class="tool-item">
+                    <span class="tool-name">{tool.name}</span>
+                    <span class="tool-desc">{tool.description}</span>
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </aside>
+
+      <!-- Right: Blog Section -->
+      <main class="blog-section">
+        <button class="search-float-btn" id="search-float-btn" aria-label="打开搜索">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="M21 21l-4.35-4.35"/>
+          </svg>
+        </button>
+
+        <dialog class="search-modal" id="search-modal" aria-label="文章搜索">
+          <div class="search-modal-panel">
+            <div class="search-modal-header">
+              <h3>文章筛选</h3>
+              <button class="search-close-btn" id="search-close-btn" aria-label="关闭搜索">×</button>
+            </div>
+            <div class="search-wrapper search-modal-input-wrap">
+              <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="M21 21l-4.35-4.35"/>
+              </svg>
+              <input type="text" id="search-modal-input" class="search-input" placeholder="输入关键字搜索文章..." aria-label="搜索文章" />
+            </div>
+
+            <div class="search-filter-group">
+              <p class="search-filter-label" id="category-filter-label">分类</p>
+              <div class="category-filter" id="category-filter" role="radiogroup" aria-labelledby="category-filter-label">
+                <button class="category-btn active" role="radio" aria-checked="true" data-category="">全部分类</button>
+                {allCategories.map((category) => (
+                  <button class="category-btn" role="radio" aria-checked="false" data-category={category.label}>{category.label}</button>
+                ))}
+              </div>
+            </div>
+
+            <div class="search-filter-group">
+              <p class="search-filter-label" id="tag-filter-label">标签</p>
+              <div class="tags-filter-block" data-max-rows="4">
+                <div class="tags-filter" id="tags-filter" role="radiogroup" aria-labelledby="tag-filter-label">
+                  <button class="tag-btn active" role="radio" aria-checked="true" data-tag="">全部</button>
+                  {allTags.map(tag => (
+                    <button class="tag-btn" role="radio" aria-checked="false" data-tag={tag.label}>{tag.label}</button>
+                  ))}
+                </div>
+                <button class="tags-filter-toggle" id="home-tags-filter-toggle" type="button" hidden aria-expanded="false">
+                  展开更多
+                </button>
+              </div>
+            </div>
+
+            <div class="search-actions">
+              <button class="search-apply-btn" id="search-apply-btn">到博客页搜索</button>
+            </div>
+          </div>
+        </dialog>
+
+        <div class="blog-header">
+          {theme.settings.home.hotContent.enabled && hotContentPosts.length > 0 && (
+            <section class="hot-content-section">
+              <div class="hot-content-header">
+                <h3><span class="section-spark" aria-hidden="true">✳</span> 值得一读</h3>
+              </div>
+              <div class="hot-content-carousel-wrapper">
+                <div class="hot-content-carousel" id="hot-content-carousel">
+                  <div class="hot-content-list" id="hot-content-list">
+                    {hotContentPosts.map(({ post, image }) => (
+                      <a href={post.url} data-article-link class="hot-content-item" draggable="false">
+                        <div class="hot-image-wrap">
+                          <Image src={image} alt={post.title} loading="lazy" width={400} height={225} draggable="false" />
+                          <span class="hot-overlay-title">{post.title}</span>
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+                <div class="hot-scroll-indicator" id="hot-scroll-indicator" aria-label="滚动指示">
+                  {hotContentPosts.map((_, index) => (
+                    <span class={`hot-scroll-dot ${index === 0 ? 'active' : ''}`} data-index={index}></span>
+                  ))}
+                </div>
+              </div>
+            </section>
+          )}
+
+          <div class="blog-title-row">
+            <div><p class="section-eyebrow">THE LATEST NOTES</p><h2 class="blog-title">最近在写<span class="title-dot" aria-hidden="true">.</span></h2></div>
+            <a href={theme.urls.archive()} class="view-all-link">查看全部 →</a>
+          </div>
+
+          <div class="blog-controls"></div>
+        </div>
+
+        <div id="posts-list" class="posts-list" data-page-size={HOME_PAGE_SIZE}>
+          {posts.map((post, index) => (
+          <PostCard post={post} index={index} pageSize={HOME_PAGE_SIZE} variant="home" />
+        ))}
+        </div>
+
+        <p id="no-results" class="no-results" style="display: none;">
+          没有找到匹配的文章
+        </p>
+
+        <div class="load-more-wrap" id="load-more-wrap">
+          <button class="load-more-btn" id="load-more-btn">加载更多文章</button>
+        </div>
+      </main>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-content">
+      <p class="copyright">© {new Date().getFullYear()} {theme.site.profile.name}. Built with Astro.</p>
+      <p class="site-links">
+        <a href={theme.urls.rss()} target="_blank" rel="noopener noreferrer">RSS 订阅</a>
+        <span>·</span>
+        <a href={theme.urls.sitemap()} target="_blank" rel="noopener noreferrer">网站树</a>
+      </p>
+      {theme.site.icp && (
+        <p class="icp">
+          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">{theme.site.icp}</a>
+        </p>
+      )}
+    </div>
+  </footer>
+</Base>
+
+<style>
+  /* ===== HERO SECTION ===== */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: var(--color-bg);
+  z-index: 100;
+  transition: transform var(--transition-base), opacity var(--transition-base);
+}
+
+.hero.collapsed {
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hero.collapsed *,
+.hero.is-paused * {
+  animation-play-state: paused !important;
+}
+
+  .hero-bg {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+
+  .hero-gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(125deg, var(--color-bg) 40%, var(--color-play-soft) 100%);
+  }
+
+  .hero-pattern {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
+    opacity: .32;
+    background-size: 28px 28px;
+  }
+
+  .hero-content {
+    position: relative;
+    z-index: 1;
+    max-width: 1120px;
+    width: min(94vw, 1120px);
+    border-radius: 30px;
+    animation: heroFadeIn 1s ease-out;
+    padding: clamp(1rem, 2vw, 2rem);
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  @keyframes heroFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .hero-shell {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
+    gap: clamp(1.25rem, 3vw, 2.4rem);
+    align-items: center;
+  }
+
+  .hero-copy {
+    text-align: left;
+    padding: clamp(0.45rem, 1vw, 0.8rem);
+  }
+
+  .hero-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.45rem 0.8rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    background: var(--color-tag-bg);
+    color: var(--color-primary);
+    border: 1px solid var(--color-border);
+    font-size: .68rem;
+    letter-spacing: .06em;
+  }
+
+  .hero-avatar-mobile {
+    display: none;
+  }
+
+  .hero-avatar-wrapper {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 124px;
+    height: 124px;
+    animation: none;
+    border: 4px solid var(--color-surface);
+    box-shadow: 0 0 0 2px var(--color-primary);
+    transform: rotate(-8deg);
+  }
+
+  @keyframes avatarPulse {
+    0%, 100% { box-shadow: 0 8px 32px rgba(255, 216, 3, 0.25); }
+    50% { box-shadow: 0 8px 48px rgba(255, 216, 3, 0.4); }
+  }
+
+  .hero-avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .hero-name {
+    font-family: var(--font-display);
+    font-weight: 700;
+    margin-bottom: 0.9rem;
+    font-size: clamp(3.5rem, 7.5vw, 6.5rem);
+    color: var(--color-primary);
+    letter-spacing: -0.05em;
+    line-height: 1.05;
+    max-width: 100%;
+    width: fit-content;
+    position: relative;
+    isolation: isolate;
+  }
+
+  .hero-tagline {
+    font-size: clamp(1.02rem, 1.8vw, 1.22rem);
+    color: var(--color-text);
+    margin-bottom: 1rem;
+    line-height: 1.75;
+    max-width: 34rem;
+  }
+
+  .hero-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem;
+    margin-bottom: 1.15rem;
+  }
+
+  .hero-location,
+  .hero-update {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-tag-bg) 72%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
+    font-size: 0.82rem;
+    color: var(--color-text-muted);
+  }
+
+  .hero-highlights {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+    margin-bottom: 1.4rem;
+  }
+
+  .hero-chip {
+    border-radius: 999px;
+    color: var(--color-text);
+    font-size: 0.82rem;
+    background: var(--color-play-soft);
+    border: 1px solid var(--color-border);
+    padding: .4rem .85rem;
+  }
+
+  .hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 0;
+  }
+
+  .hero-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all var(--transition-base);
+    text-decoration: none;
+  }
+
+  .hero-btn-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .hero-btn.primary {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    border: 2px solid var(--color-primary);
+    box-shadow: 4px 4px 0 var(--color-accent-soft);
+  }
+
+  .hero-btn.primary:hover {
+    background: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: 6px 6px 0 var(--color-accent-soft);
+  }
+
+  .hero-btn.secondary {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 2px solid var(--color-border);
+  }
+
+  .hero-btn.secondary:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+  }
+
+  .hero-panel {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .hero-profile-card {
+    display: flex;
+    align-items: center;
+    border-radius: 24px;
+    position: relative;
+    flex-direction: column;
+    gap: .65rem;
+    padding: 2.5rem 1.5rem 1.75rem;
+    background: var(--color-play-soft);
+    border: 1.5px solid var(--color-text);
+    box-shadow: 8px 8px 0 var(--color-accent-soft);
+    transform: rotate(3deg);
+    min-height: 265px;
+  }
+
+  .hero-signature {
+    line-height: 1.7;
+    font-size: .78rem;
+    color: var(--color-text-muted);
+  }
+
+  .hero-metrics {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.8rem;
+  }
+
+  .metric-card {
+    padding: 1rem 0.9rem;
+    border-radius: 20px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .metric-value {
+    display: block;
+    font-family: var(--font-display);
+    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
+    font-weight: 700;
+    color: var(--color-text-headline);
+    line-height: 1;
+    margin-bottom: 0.45rem;
+  }
+
+  .metric-label {
+    display: block;
+    font-size: 0.78rem;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+    letter-spacing: 0.03em;
+  }
+
+  .scroll-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    animation: scrollBounce 2s ease-in-out infinite;
+    margin-top: 1.8rem;
+  }
+
+  @keyframes scrollBounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(8px); }
+  }
+
+  .scroll-mouse {
+    width: 24px;
+    height: 40px;
+    border: 2px solid var(--color-text-muted);
+    border-radius: 12px;
+    position: relative;
+  }
+
+  .scroll-dot {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 8px;
+    background: var(--color-primary);
+    border-radius: 2px;
+    animation: scrollDot 1.5s ease-in-out infinite;
+  }
+
+  @keyframes scrollDot {
+    0%, 100% { top: 8px; opacity: 1; }
+    50% { top: 20px; opacity: 0.3; }
+  }
+
+  .scroll-text {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  /* ===== CONTENT WRAPPER ===== */
+.content-wrapper {
+  padding: var(--section-padding);
+  min-height: 100vh;
+  position: relative;
+  margin-top: 100vh;
+  transition: margin-top var(--transition-base);
+  background: radial-gradient(ellipse at 0 0, var(--color-play-soft), transparent 550px), var(--color-bg);
+}
+
+.content-wrapper.hero-collapsed {
+  margin-top: 0;
+}
+
+  .sidebar-drawer-toggle {
+    display: none;
+  }
+
+  .sidebar-drawer-toggle.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+.sidebar-overlay {
+  display: none;
+}
+
+  .content-grid {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: start;
+    gap: 3rem;
+  }
+
+  @media (min-width: 900px) {
+    .content-grid {
+      grid-template-columns: 300px 1fr;
+    }
+  }
+
+  /* ===== SIDEBAR ===== */
+  .sidebar {
+    animation: sidebarSlideIn 0.8s ease-out;
+  }
+
+  @keyframes sidebarSlideIn {
+    from {
+      opacity: 0;
+      transform: translateX(-30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-card {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    position: sticky;
+    top: 2rem;
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-offset);
+  }
+
+@media (max-width: 899px) {
+  .sidebar-drawer-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-border);
+    background: color-mix(in srgb, var(--color-surface) 84%, rgba(255, 255, 255, 0.35));
+    color: var(--color-text);
+    position: fixed;
+    left: 0.9rem;
+    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
+    transform: translateY(-8px) scale(0.96);
+    cursor: pointer;
+    z-index: 246;
+    box-shadow:
+      0 14px 28px rgba(15, 23, 42, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    backdrop-filter: blur(14px) saturate(130%);
+    -webkit-backdrop-filter: blur(14px) saturate(130%);
+    transition:
+      transform var(--transition-base),
+      opacity var(--transition-fast),
+      box-shadow var(--transition-fast),
+      background-color var(--transition-fast),
+      color var(--transition-fast),
+      border-color var(--transition-fast);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sidebar-drawer-toggle .icon-menu,
+  .sidebar-drawer-toggle .icon-close {
+    position: absolute;
+    transition:
+      transform 220ms ease,
+      opacity 180ms ease;
+  }
+
+  .sidebar-drawer-toggle .icon-close {
+    opacity: 0;
+    transform: scale(0.7) rotate(-90deg);
+  }
+
+  .sidebar-drawer-toggle:hover {
+    color: var(--color-secondary);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar-drawer-toggle.open {
+    transform: translateY(0) scale(1);
+    background: var(--color-secondary);
+    color: var(--color-bg);
+    border-color: transparent;
+    box-shadow:
+      0 18px 36px rgba(15, 23, 42, 0.18),
+      0 0 0 6px color-mix(in srgb, var(--color-secondary) 16%, transparent);
+  }
+
+  .sidebar-drawer-toggle.open,
+  .sidebar-drawer-toggle.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .sidebar-drawer-toggle.visible {
+    transform: translateY(0) scale(1);
+  }
+
+  .sidebar-drawer-toggle.open .icon-menu {
+    opacity: 0;
+    transform: scale(0.7) rotate(90deg);
+  }
+
+  .sidebar-drawer-toggle.open .icon-close {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  .sidebar-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-fast);
+    z-index: 235;
+  }
+
+  .sidebar-overlay.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .sidebar-drawer {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(84vw, 340px);
+    padding: calc(env(safe-area-inset-top, 0px) + 4.2rem) 0.75rem 1rem 1rem;
+    transform: translateX(calc(-100% - 24px)) scale(0.98);
+    transform-origin: left center;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 220ms ease,
+      visibility 220ms ease;
+    z-index: 240;
+    overflow: auto;
+    animation: none;
+  }
+
+  .sidebar-drawer.open {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .sidebar-drawer .sidebar-card {
+    position: static;
+    min-height: 100%;
+    border-radius: 1.75rem;
+    border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, rgba(255, 255, 255, 0.2)) 0%, color-mix(in srgb, var(--color-surface) 100%, transparent) 100%);
+    box-shadow:
+      0 26px 56px rgba(15, 23, 42, 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    overflow: hidden;
+  }
+
+  .sidebar-card {
+    position: static;
+  }
+
+  .sidebar {
+    animation: none;
+  }
+
+  :global(body.sidebar-drawer-open) #ui-float-right {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    transform: translateX(16px) !important;
+  }
+}
+
+  .sidebar-header {
+    padding: 2rem;
+    text-align: center;
+    border-bottom: 1px solid var(--color-border);
+    background: linear-gradient(155deg, var(--color-play-soft), var(--color-accent-soft));
+  }
+
+  .sidebar-avatar {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1rem;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid var(--color-primary);
+  }
+
+  .sidebar-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .sidebar-name {
+    font-family: var(--font-display);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-text-headline);
+    margin-bottom: 0.5rem;
+  }
+
+  .sidebar-bio {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    line-height: 1.5;
+  }
+
+  .sidebar-section {
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .sidebar-section:last-child {
+    border-bottom: none;
+  }
+
+  .sidebar-section-title {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 1rem;
+  }
+
+  .social-links {
+    display: flex;
+    justify-content: center;
+    gap: 0.75rem;
+  }
+
+  .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-alt);
+    color: var(--color-text);
+    transition: all var(--transition-base);
+  }
+
+  .social-link:hover {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    transform: translateY(-2px);
+  }
+
+  .activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .activity-item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+  }
+
+  .activity-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    margin-top: 0.375rem;
+    flex-shrink: 0;
+  }
+
+  .activity-content {
+    flex: 1;
+  }
+
+  .activity-text {
+    font-size: 0.8rem;
+    color: var(--color-text);
+    margin-bottom: 0.125rem;
+    line-height: 1.4;
+  }
+
+  .activity-link {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+
+  .activity-link:hover {
+    color: var(--color-secondary);
+  }
+
+  .activity-time {
+    font-size: 0.7rem;
+    color: var(--color-text-muted);
+    font-family: var(--font-mono);
+  }
+
+  .tools-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .tool-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-alt);
+    text-decoration: none;
+    transition: all var(--transition-fast);
+  }
+
+  .tool-item:hover {
+    background: var(--color-tag-bg);
+    transform: translateX(4px);
+  }
+
+  .tool-name {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  .tool-desc {
+    font-size: 0.7rem;
+    color: var(--color-text-muted);
+  }
+
+  .quote {
+    border-left: 3px solid var(--color-primary);
+    padding-left: 1rem;
+    margin: 0;
+  }
+
+  .quote-text {
+    font-family: var(--font-display);
+    font-size: 0.9rem;
+    color: var(--color-text);
+    font-style: italic;
+    line-height: 1.6;
+    margin-bottom: 0.5rem;
+  }
+
+  .quote-author {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    font-style: normal;
+  }
+
+  /* ===== BLOG SECTION ===== */
+  .blog-section {
+    min-height: 50vh;
+  }
+
+  .blog-header {
+    margin-bottom: 2rem;
+  }
+
+  .blog-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+    margin-bottom: 1.15rem;
+  }
+
+  .blog-title {
+    font-family: var(--font-display);
+    font-weight: 700;
+    color: var(--color-text-headline);
+    font-size: 1.7rem;
+  }
+
+  .view-all-link {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    padding: .4rem .8rem;
+    border-radius: var(--radius-full);
+  }
+
+  .view-all-link:hover {
+    color: var(--color-secondary);
+  }
+
+  .blog-controls {
+    min-height: 0;
+  }
+
+  .search-float-btn {
+    position: fixed;
+    right: 2rem;
+    top: 2rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    box-shadow: var(--shadow-md);
+    transition:
+      transform var(--transition-fast),
+      scale var(--transition-fast),
+      opacity var(--transition-fast),
+      color var(--transition-fast),
+      box-shadow var(--transition-fast);
+    z-index: 190;
+    opacity: 0;
+    transform: translateX(20px);
+    pointer-events: none;
+  }
+
+  .search-float-btn.visible {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  .search-float-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .search-float-btn:hover {
+    color: var(--color-secondary);
+    scale: 1.05;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .search-modal {
+    margin: 0;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    color: var(--color-text);
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    display: none;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: 5.5rem 2rem 1rem;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity var(--transition-fast), visibility var(--transition-fast);
+    z-index: 70;
+  }
+
+  .search-modal[open] {
+    display: flex;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  @starting-style {
+    .search-modal[open] {
+      opacity: 0;
+    }
+  }
+
+  .search-modal-panel {
+    width: min(680px, calc(100vw - 4rem));
+    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
+    border-radius: var(--radius-lg);
+    padding: 1rem;
+    box-shadow: var(--shadow-lg);
+    max-height: calc(100vh - 7rem);
+    overflow: auto;
+  }
+
+  .search-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.8rem;
+  }
+
+  .search-modal-header h3 {
+    font-size: 0.95rem;
+    color: var(--color-text);
+  }
+
+  .search-close-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-alt);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
+    touch-action: manipulation;
+  }
+
+  .search-close-btn:hover {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .search-close-btn:active {
+      transform: scale(0.96);
+    }
+  }
+
+  .search-modal-input-wrap {
+    max-width: 100%;
+  }
+
+  .search-filter-group {
+    margin-top: 0.85rem;
+  }
+
+  .search-filter-label {
+    font-size: 0.76rem;
+    color: var(--color-text-muted);
+    margin-bottom: 0.45rem;
+  }
+
+  .search-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.9rem;
+  }
+
+  .search-apply-btn {
+    padding: 0.5rem 0.9rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-secondary);
+    background: var(--color-secondary);
+    color: var(--color-bg);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .search-apply-btn:hover {
+    transform: translateY(-1px);
+    opacity: 0.92;
+  }
+
+  .hot-content-section {
+    margin-bottom: 1.4rem;
+    box-shadow: none;
+    padding: 1.1rem;
+    border: 1px solid var(--color-border);
+    background: var(--color-accent-soft);
+    border-radius: var(--radius-lg);
+  }
+
+  .hot-content-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+    margin-bottom: 0.65rem;
+  }
+
+  .hot-content-header h3 {
+    color: var(--color-text);
+    font-size: .9rem;
+    font-weight: 650;
+  }
+
+  .hot-content-list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.8rem;
+  }
+
+  .hot-content-carousel {
+    overflow: visible;
+  }
+
+  .hot-content-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .hot-content-item {
+    display: block;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    background: var(--color-bg-alt);
+    overflow: hidden;
+    transition: all var(--transition-fast);
+  }
+
+  .hot-content-item:hover {
+    border-color: var(--color-secondary);
+    transform: translateY(-1px);
+  }
+
+  .hot-image-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background: var(--color-surface);
+    overflow: hidden;
+  }
+
+  .hot-image-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .hot-overlay-title {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.65rem 0.7rem;
+    font-size: 0.82rem;
+    line-height: 1.35;
+    color: #fff;
+    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 78%);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity var(--transition-fast), transform var(--transition-fast);
+    pointer-events: none;
+  }
+
+  .hot-content-item:hover .hot-overlay-title {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .controls-right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    width: auto;
+  }
+
+  .category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .category-btn {
+    padding: 0.35rem 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-bg-alt);
+    color: var(--color-text-muted);
+    font-size: 0.78rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .category-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-text);
+  }
+
+  .category-btn.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-on-primary);
+  }
+
+  @media (min-width: 600px) {
+    .blog-controls {
+      min-height: 0;
+    }
+  }
+
+  .search-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-muted);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.625rem 1rem 0.625rem 2.5rem;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: 0.875rem;
+    transition: all var(--transition-base);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-tag-bg);
+  }
+
+  .search-input::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .tags-filter-block {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.6rem;
+  }
+
+  .tags-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    max-height: var(--expanded-height, none);
+    overflow: hidden;
+    transition: max-height var(--transition-base);
+  }
+
+  .tags-filter.is-collapsed {
+    max-height: var(--collapsed-height);
+  }
+
+  .tags-filter .tag-btn:focus-visible {
+    outline-offset: -3px;
+  }
+
+  .tags-filter-toggle {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .tags-filter-toggle:hover {
+    color: var(--color-secondary);
+  }
+
+  .tags-filter-toggle[hidden] {
+    display: none;
+  }
+
+  .tag-btn {
+    padding: 0.375rem 0.875rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .tag-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-text);
+  }
+
+  .tag-btn.active {
+    background: var(--color-secondary);
+    color: var(--color-bg);
+    border-color: var(--color-secondary);
+  }
+
+  .tag-btn.hidden-by-filter,
+  .category-btn.hidden-by-filter {
+    display: none;
+  }
+
+  .blog-controls {
+    position: relative;
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .no-results {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: 3rem;
+    font-size: 1rem;
+  }
+
+  .load-more-wrap {
+    display: flex;
+    justify-content: center;
+    margin-top: 1.5rem;
+    min-height: 2.75rem;
+  }
+
+  .load-more-wrap.hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .load-more-btn {
+    padding: 0.65rem 1.2rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 0.88rem;
+  }
+
+  .load-more-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+    transform: translateY(-1px);
+  }
+
+  /* ===== FOOTER ===== */
+  .footer {
+    background: var(--color-surface);
+    border-top: 1px solid var(--color-border);
+    padding: 2rem;
+  }
+
+  .footer-content {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .copyright {
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    margin-bottom: 0.5rem;
+  }
+
+  .site-links {
+    font-size: 0.82rem;
+    color: var(--color-text-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .site-links a {
+    color: var(--color-text-muted);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+
+  .site-links a:hover {
+    color: var(--color-secondary);
+  }
+
+  .icp {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+  }
+
+  .icp a {
+    color: var(--color-text-muted);
+    transition: color var(--transition-fast);
+  }
+
+  .icp a:hover {
+    color: var(--color-primary);
+  }
+
+  /* ===== RESPONSIVE ===== */
+  @media (max-width: 900px) {
+    .hero-content {
+      width: min(94vw, 720px);
+      border-radius: 24px;
+    }
+
+    .hero-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .hero-copy {
+      text-align: center;
+      padding: 0.25rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .hero-name,
+    .hero-tagline {
+      max-width: none;
+    }
+
+    .hero-name {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .hero-meta,
+    .hero-highlights,
+    .hero-actions {
+      justify-content: center;
+    }
+
+    .hero-profile-card {
+      justify-content: center;
+      text-align: left;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .hero {
+      align-items: center;
+      padding-top: 0;
+    }
+
+    .hero-content {
+      border-radius: 20px;
+      padding: 0.9rem;
+    }
+
+    .hero-actions {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: 0.6rem;
+    }
+
+    .hero-btn {
+      position: relative;
+      flex: 0 0 3.1rem;
+      width: 3.1rem;
+      min-width: 3.1rem;
+      height: 3.1rem;
+      min-height: 3.1rem;
+      padding: 0;
+      border-radius: 999px;
+      text-align: center;
+      font-size: 0;
+      gap: 0;
+      overflow: hidden;
+    }
+
+    .hero-kicker {
+      display: inline-flex;
+      margin-bottom: 0.7rem;
+      font-size: 0.66rem;
+    }
+
+    .hero-avatar-mobile {
+      display: flex;
+      width: 84px;
+      height: 84px;
+      margin: 0 auto 0.7rem;
+      border-radius: 50%;
+      overflow: hidden;
+      border: 4px solid var(--color-primary);
+      box-shadow: 0 8px 32px rgba(255, 216, 3, 0.25);
+      animation: avatarPulse 3s ease-in-out infinite;
+    }
+
+    .hero-name {
+      font-size: clamp(2.2rem, 13vw, 3rem);
+      max-width: none;
+      margin-bottom: 0.55rem;
+    }
+
+    .hero-tagline {
+      font-size: 0.94rem;
+      line-height: 1.55;
+      margin-bottom: 0.8rem;
+    }
+
+    .hero-meta,
+    .hero-highlights,
+    .hero-location,
+    .hero-update {
+      display: none;
+    }
+
+    .hero-panel {
+      gap: 0.65rem;
+    }
+
+    .hero-profile-card {
+      display: none;
+    }
+
+    .hero-signature {
+      display: none;
+    }
+
+    .hero-metrics {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.5rem;
+    }
+
+    .metric-card {
+      padding: 0.72rem 0.45rem;
+      border-radius: 14px;
+    }
+
+    .metric-value {
+      font-size: 1.35rem;
+      margin-bottom: 0.28rem;
+    }
+
+    .metric-label {
+      font-size: 0.66rem;
+      line-height: 1.35;
+    }
+
+    .scroll-indicator {
+      margin-top: 0.9rem;
+      gap: 0.4rem;
+      transform: scale(0.88);
+    }
+
+    .hero-btn-icon {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%);
+      width: 1.1rem;
+      height: 1.1rem;
+    }
+
+    .hero-btn-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .blog-title-row {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .search-float-btn {
+      right: 1rem;
+      top: 1rem;
+    }
+
+    .search-modal {
+      justify-content: center;
+      padding: 5rem 1rem 1rem;
+    }
+
+    .search-modal-panel {
+      width: min(680px, 100%);
+    }
+
+    .search-wrapper {
+      max-width: 100%;
+    }
+
+    .controls-right {
+      align-items: stretch;
+      width: 100%;
+    }
+
+  }
+
+  @media (max-width: 899px) {
+    .hot-content-carousel-wrapper {
+      position: relative;
+      -webkit-user-select: none;
+      user-select: none;
+      -webkit-touch-callout: none;
+    }
+
+    .hot-content-carousel {
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      padding: 0 0.25rem 0.25rem;
+    }
+
+    .hot-content-carousel::-webkit-scrollbar {
+      display: none;
+    }
+
+    .hot-content-list {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 0.75rem;
+      width: 100%;
+      pointer-events: none;
+    }
+
+    .hot-content-list .hot-content-item {
+      pointer-events: auto;
+    }
+
+    .hot-content-item {
+      flex: 0 0 100%;
+      width: 100%;
+      max-width: 100%;
+      scroll-snap-align: start;
+    }
+
+    .hot-image-wrap {
+      aspect-ratio: 18 / 9;
+    }
+
+    .hot-overlay-title {
+      opacity: 1;
+      transform: none;
+      font-size: 0.86rem;
+    }
+
+    .hot-scroll-indicator {
+      position: absolute;
+      right: 1rem;
+      bottom: 1rem;
+      display: flex;
+      gap: 5px;
+      z-index: 10;
+      pointer-events: none;
+    }
+
+    .hot-scroll-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      transition: background 0.25s ease, transform 0.25s ease;
+    }
+
+    .hot-scroll-dot.active {
+      background: #fff;
+      transform: scale(1.2);
+    }
+
+    .hot-content-item:hover {
+      transform: none;
+    }
+  }
+
+  /* Desktop: hide scroll indicator */
+  @media (min-width: 900px) {
+    .hot-scroll-indicator {
+      display: none;
+    }
+
+    .hot-content-carousel-wrapper {
+      display: contents;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero * {
+      animation: none !important;
+    }
+
+    .hero-blob,
+    .hero-content,
+    .hero-gradient,
+    .hero-pattern {
+      animation: none !important;
+      transform: none !important;
+      transition: none !important;
+    }
+  }
+
+  /* Small static shapes keep the welcome area playful without a rendering loop. */
+
+  .hero-blob { position: absolute; pointer-events: none; }
+
+  .blob-1 { width: 220px; height: 220px; border: 38px solid var(--color-accent-soft); border-radius: 50%; left: -90px; top: 12%; }
+
+  .blob-2 { width: 160px; height: 160px; right: 3%; top: 12%; background: var(--color-play); opacity: .7; transform: rotate(15deg); clip-path: polygon(50% 0%,61% 28%,85% 15%,72% 39%,100% 50%,72% 61%,85% 85%,61% 72%,50% 100%,39% 72%,15% 85%,28% 61%,0% 50%,28% 39%,15% 15%,39% 28%); }
+
+  .blob-3 { width: 230px; height: 110px; border: 2px solid var(--color-primary); border-radius: 50%; left: 15%; bottom: 6%; transform: rotate(-20deg); opacity: .2; }
+
+  .hero-masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font: .68rem var(--font-mono); letter-spacing: .12em; }
+
+  .hero-wordmark { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-text); font: 700 1.2rem var(--font-family); letter-spacing: -.04em; }
+
+  .wordmark-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
+
+  .hero-name::after { content: ''; position: absolute; left: 0; right: -4%; bottom: 2%; height: 22%; border-radius: 50% 20% 40% 10%; background: var(--color-play); opacity: .5; transform: rotate(-3deg); z-index: -1; }
+
+  .hero-chip:nth-child(2) { background: var(--color-accent-soft); transform: rotate(-3deg); }
+
+  .hero-chip:nth-child(3) { background: var(--color-tag-bg); transform: rotate(2deg); }
+
+  .profile-sticker { position: absolute; right: -10px; top: -14px; padding: .35rem .9rem; background: var(--color-primary); color: var(--color-on-primary); border: 1px solid var(--color-text); border-radius: 8px; font-size: .8rem; transform: rotate(6deg); }
+
+  .profile-note { font-weight: 650; font-size: 1.05rem; }
+
+  .hero-metrics { margin-top: .6rem; }
+
+  .metric-card:nth-child(2) { background: var(--color-accent-soft); }
+
+  .metric-card:nth-child(3) { background: var(--color-tag-bg); }
+
+  .section-eyebrow { color: var(--color-text-muted); font: .66rem var(--font-mono); letter-spacing: .14em; margin-bottom: .4rem; }
+
+  .title-dot { color: var(--color-primary); }
+
+  .section-spark { display: inline-block; color: var(--color-primary); font-size: 1.25rem; vertical-align: middle; margin-right: .3rem; }
+
+  @media (max-width: 900px) {
+    .hero-masthead { margin-bottom: 1.3rem; }
+    .hero-profile-card { transform: none; flex-direction: row; flex-wrap: wrap; min-height: auto; padding: 1rem; }
+    .profile-note { display: none; }
+    .hero-avatar-wrapper { width: 64px; height: 64px; }
+  }
+
+  @media (max-width: 600px) {
+    .hero-content { padding: 1rem 1.25rem; width: min(96vw, 480px); }
+    .hero-masthead { padding-bottom: .8rem; margin-bottom: 1.2rem; font-size: .54rem; }
+    .hero-name { font-size: 3.5rem; }
+    .hero-avatar-mobile { animation: none; border-color: var(--color-surface); box-shadow: 5px 5px 0 var(--color-accent), -5px -5px 0 var(--color-play); transform: rotate(-7deg); margin-bottom: 1rem; }
+    .hero-actions { gap: .65rem; flex-wrap: wrap; }
+    .hero-btn.primary { flex: 0 0 auto; width: auto; padding: 0 1rem; gap: .5rem; font-size: .85rem; }
+    .hero-btn.primary .hero-btn-icon { position: static; transform: none; }
+    .hero-btn.primary .hero-btn-label { position: static; width: auto; height: auto; clip: auto; margin: 0; }
+    .hero-metrics { margin-top: .1rem; }
+    .blob-2 { width: 95px; height: 95px; top: 5%; right: -20px; }
+    .blob-3 { bottom: 2%; }
+    .blog-title-row { flex-direction: row; align-items: flex-end; gap: .6rem; }
+    .blog-title { font-size: 1.45rem; }
+    .hot-content-section { padding: .8rem; }
+  }
+
+  @media (max-height: 650px) and (min-width: 601px) {
+    .hero-masthead { margin-bottom: .8rem; padding-bottom: .5rem; }
+    .hero-shell { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 1.25rem; }
+    .hero-copy { text-align: left; align-items: flex-start; }
+    .hero-meta, .hero-highlights { display: none; }
+    .hero-profile-card { min-height: auto; padding: 1rem; }
+    .hero-avatar-wrapper { width: 64px; height: 64px; }
+    .hero-name { font-size: 3.5rem; margin-left: 0; }
+    .hero-tagline { font-size: .9rem; line-height: 1.5; }
+    .hero-btn { padding: .65rem .85rem; }
+    .metric-card { padding: .6rem; }
+    .metric-value { font-size: 1.5rem; }
+    .metric-label { font-size: .65rem; }
+    .scroll-indicator { margin-top: .5rem; }
+    .scroll-mouse { display: none; }
+  }
+
+  @media (max-width: 600px) and (max-height: 700px) {
+    .hero-content { padding: .6rem 1rem; }
+    .hero-masthead { margin-bottom: .65rem; padding-bottom: .45rem; }
+    .hero-shell { gap: .65rem; }
+    .hero-kicker { font-size: .58rem; padding: .3rem .5rem; margin-bottom: .65rem; }
+    .hero-avatar-mobile { width: 64px; height: 64px; margin-bottom: .6rem; }
+    .hero-name { font-size: 2.8rem; margin-bottom: .45rem; }
+    .hero-tagline { font-size: .84rem; line-height: 1.5; margin-bottom: .65rem; }
+    .metric-card { padding: .6rem .4rem; }
+    .scroll-indicator { margin-top: .4rem; gap: .25rem; }
+    .scroll-mouse { width: 20px; height: 30px; }
+  }
+</style>
+
+<script>
+  import '../scripts/home';
+</script>