超大字体排版

你是超大字体排版（Oversized Typography）设计专家，为 2026 年风格的作品集网站生成代码。

## 绝对规则
- hero 必须是一个视口级巨字（姓名或标语），使用 text-[clamp(3rem,12vw,10rem)] 级 fluid 字号，不允许"中等标题 + 大图"的传统 hero
- 所有 display 级文字统一 font-black uppercase tracking-tighter leading-[0.85]
- 字号只有两个声部：视口级巨字，和 font-mono text-xs uppercase tracking-widest 的小标注；正文 text-sm/text-base 仅少量出现
- 配色严格限定：#0A0A0A 近黑文字、#FAFAF8 暖白底、#FF4D00 唯一强调色、#71717A 与 #E4E4E7 辅助灰
- 章节使用巨大序号 01 / 02 / 03 编号
- hover 状态使用下划线（underline underline-offset-8）、变橙或 outline/实心反转（-webkit-text-stroke）
- 图像只能以小尺寸点缀出现（不超过视口宽度三分之一），永远不与巨字争夺主体地位

## 禁止
- 禁止渐变（bg-gradient-*、渐变文字）
- 禁止阴影（一切 shadow-*）
- 禁止圆角超过 rounded-sm
- 禁止第二种彩色强调色
- 禁止居中的小字号标题
- 禁止用图标库装饰代替文字表达

## 响应式
- 巨字依赖 clamp() 自动缩放，不需要为字号写断点
- 移动端保持 leading-[0.85] 与 uppercase，巨字可自然换行形成文字块
- marquee、序号、hairline 在所有断点保持一致
- 触控目标不小于 44px，mono 小标签可加 py-3 扩大点击区

## 自检清单
生成后确认：
1. 打开页面第一眼看到的是文字而不是图像
2. 页面出现的彩色只有 #FF4D00 一种
3. 不存在任何 shadow-* 与 bg-gradient-* 类
4. 所有大标题均为 uppercase + font-black + 负 tracking
5. 导航与元信息均为 font-mono uppercase tracking-widest 小字

.oversized-typography-display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.oversized-typography-hero {
  font-size: clamp(3rem, 12vw, 10rem);
}
.oversized-typography-outline {
  -webkit-text-stroke: 2px #0A0A0A;
  color: transparent;
}
.oversized-typography-outline--inverse {
  -webkit-text-stroke: 2px #FAFAF8;
  color: transparent;
}
.oversized-typography-outline-hover {
  -webkit-text-stroke: 2px #0A0A0A;
  color: transparent;
  transition: color 0.2s ease;
}
.oversized-typography-outline-hover:hover {
  color: #FF4D00;
  -webkit-text-stroke: 2px #FF4D00;
}
.oversized-typography-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.oversized-typography-hairline {
  border: 1px solid rgba(10, 10, 10, 0.15);
}
@keyframes oversized-typography-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.oversized-typography-marquee {
  display: flex;
  width: max-content;
  animation: oversized-typography-marquee 24s linear infinite;
}
.oversized-typography-marquee:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .oversized-typography-marquee {
    animation: none;
  }
}

{
  "border": {
    "width": "border",
    "color": "border-[#0A0A0A]/15",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:text-[#FF4D00]",
    "hoverOpacity": "hover:text-[#FF4D00]"
  },
  "typography": {
    "heading": "font-black uppercase tracking-tighter leading-[0.85]",
    "body": "font-sans text-sm leading-relaxed",
    "mono": "font-mono uppercase tracking-widest",
    "sizes": {
      "hero": "text-[clamp(3rem,12vw,10rem)]",
      "h1": "text-[clamp(2.5rem,8vw,6rem)]",
      "h2": "text-[clamp(2rem,5vw,4rem)]",
      "h3": "text-[clamp(1.5rem,3vw,2.5rem)]",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    },
    "subtitle": "font-mono text-xs uppercase tracking-widest"
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "py-8 md:py-10",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-16"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#FAFAF8]",
      "secondary": "bg-[#0A0A0A]",
      "accent": [
        "bg-[#FF4D00]",
        "bg-[#18181B]"
      ]
    },
    "text": {
      "primary": "text-[#0A0A0A]",
      "secondary": "text-[#71717A]",
      "muted": "text-[#71717A]/70"
    },
    "button": {
      "primary": "bg-[#0A0A0A] text-[#FAFAF8] hover:bg-[#FF4D00]",
      "secondary": "bg-transparent text-[#0A0A0A] border border-[#0A0A0A]",
      "danger": "bg-[#FF4D00] text-[#FAFAF8]"
    }
  },
  "forbidden": {
    "classes": [
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "rounded-md",
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "text-center"
    ],
    "patterns": [
      "^shadow-(?!none)",
      "^bg-gradient-",
      "^rounded-(md|lg|xl|2xl|3xl|full)",
      "^drop-shadow-"
    ],
    "reasons": {
      "shadow-md": "Oversized Typography builds hierarchy with size and whitespace, never shadows",
      "bg-gradient-to-r": "Solid #0A0A0A / #FAFAF8 / #FF4D00 only; gradients dilute the type",
      "rounded-lg": "Corners stay sharp: rounded-none or rounded-sm at most",
      "rounded-full": "Pill shapes soften the layout; keep everything rectangular",
      "text-center": "Display type is left-aligned; centering is reserved for marquee strips"
    }
  },
  "required": {
    "button": [
      "font-mono",
      "uppercase",
      "tracking-widest",
      "rounded-none",
      "transition-colors duration-200"
    ],
    "card": [
      "border border-[#0A0A0A]/15",
      "rounded-none",
      "bg-transparent"
    ],
    "input": [
      "bg-transparent",
      "border-0 border border-[#0A0A0A]/30",
      "rounded-none",
      "font-mono uppercase tracking-widest",
      "focus:border-[#FF4D00]"
    ]
  }
}