# Bento瓷贴风 · Apple-Style Bento Grid

> 来源技能：`taste-skill` 2.B 节 — Bento (Apple-style tile grids)

## 风格定位

Apple 式混合尺寸瓷砖网格。CSS Grid 混合单元格大小，白底圆角瓷砖以 16px 间距排列，呈现干净、克制、信息密度适中的瓷贴拼图布局。禁止卡中卡嵌套。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 银底 | `#F5F5F7` | 页面背景 |
| 白瓷 | `#FFFFFF` | 瓷砖填充 |
| 近黑 | `#1D1D1F` | 标题、正文 |
| 次级 | `#6E6E73` | 描述 |
| Apple蓝 | `#0071E3` | 强调色 |
| 浅蓝 | `#EAF3FF` | 重要瓷砖渐变 |

## 字体

- **展示字体**：Outfit 500/700/800（本地 woff2），标题 `clamp(2rem, 4.5vw, 3.25rem)`
- **等宽**：JetBrains Mono 400（编号、模板、元数据）
- **中文**：系统栈

## 布局特点

- Hero = 1 大 + 2 小瓷砖组合（h1 占 3/4 宽浅蓝渐变大瓷砖）
- feature/hub-card/card 网格 → 瓷砖网格
- 末行自动补位（JS 注入 `.b-span-2/.b-span-3` 消除空洞）
- 瓷砖圆角 24px、间距 16px、极轻阴影

## 交互特性

- 滚动 stagger 淡入上浮（IntersectionObserver + 70ms 逐块延迟）
- 瓷砖 hover `scale(1.01)` + 阴影加深
- 移动菜单白瓷下拉面板
- 保留全部基础功能
- `prefers-reduced-motion` 降级

## 响应式

| 断点 | 布局 |
|------|------|
| > 980px | 3-4 列 |
| 768-980px | 2 列 |
| < 760px | 单列堆叠 |

## 文件结构

```
Bento瓷贴风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css          （Bento 瓷砖网格系统）
    ├── site.min.js            （补位 + stagger + 基础功能）
    └── vendor/fonts/          （Outfit + JetBrains Mono 本地字体）
```