Journalistic Portrait

Southern People Weekly Magazine Layout Skill

Replicates the visual identity of Southern People Weekly (南方人物周刊) as HTML web pages.

Reference Source

• Type: Uploaded PDF artifact (native PDF)
• Reference File Type: PDF
• Style origin: Extracted from concrete 4-page PDF visual analysis
• Language: Chinese (Simplified) with occasional English labels

Supported Outputs

Default output: HTML static web page (single-file or multi-page).

Workflow

1. Read references/style_contract.md for the complete visual style specification.
2. Read references/structure_contract.md for the page structure rules and layout patterns.
3. Generate HTML following all contracts and the 4 Frontend Iron Rules below.
4. Validate each page type against the checklist in the Iron Rules section.

The 4 Frontend Iron Rules (MANDATORY — MUST APPEAR VERBATIM)

These 4 rules must be explicitly written into the generated HTML/CSS and strictly followed:

Rule 1: Cover Layering (z-index Stack)

封面分层：准确提取原件色彩，切勿将红边框设为全局背景。用 z-index 分三层：底层暗调背景图、中层报头、顶层边框与导读。

The cover page MUST use a 3-layer z-index stack. Never set the red border as a global background.

• Layer 0 (z-index: 0): Darkened full-bleed cover photo with gradient overlay
• Layer 1 (z-index: 1): Masthead "南方" + "人物周刊" + cover headline text
• Layer 2 (z-index: 2): Red border frame + right-side TOC teasers + bottom info bar

CSS skeleton:

.cover-container { position: relative; width: 100%; aspect-ratio: 3/4; min-height: 900px; overflow: hidden; }
.cover-bg        { position: absolute; z-index: 0; inset: 20px; }
.cover-bg img    { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.cover-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.45)); }
.cover-masthead  { position: absolute; z-index: 1; inset: 20px; display: flex; flex-direction: column; }
.cover-frame     { position: absolute; z-index: 2; inset: 0; border: 12px solid #D90712; pointer-events: none; }
.cover-frame::after { content: ''; position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,0.6); }
.cover-teasers   { position: absolute; z-index: 2; right: 60px; bottom: 120px; color: #fff; text-align: right; }
.cover-bottom-bar { position: absolute; z-index: 2; bottom: 20px; left: 20px; right: 20px; }

Cover checklist:

• Masthead reads "南方" + "人物周刊" (NOT "南方人物周刊" as one line)
• Slogan "时代的肖像" centered at top
• Right-side teaser boxes present (P62文化, P70娱乐, +P38国际)
• "国际" teaser has white circle with red "+" icon
• Bottom info bar with ISSN, barcode, QR code, price, issue info, website
• Red border #D90712 exactly 12px, with inner white line

Rule 2: Image-Text Collision Prevention (No Absolute Images)

防图文遮挡：内页图片严禁使用 position: absolute。必须用 float 配合 margin 推开文字，父级容器强制应用 clearfix。

Inner-page images MUST NEVER use position: absolute. Always use float with margin to push text away. Parent container MUST apply clearfix.

.article-image { float: right; margin: 0 0 1em 1.5em; max-width: 48%; }
.article-image.left { float: left; margin: 0 1.5em 1em 0; }
.article-column::after { content: ""; display: table; clear: both; }

Image checklist:

• NO position: absolute on any inner-page image
• Images use float: right or float: left with margin
• Parent container has clearfix (::after with clear: both)
• Caption is right-aligned below image

Rule 3: Layout Collapse Prevention (No Fixed Heights)

防排版崩塌：绝对禁止给文本容器写死固定高度。全局强制应用 word-wrap: break-word 与 box-sizing: border-box。

NEVER assign fixed height to text containers. Globally enforce box-sizing and word-wrap.

* { box-sizing: border-box; }
.text-container,
.column,
.article-body { height: auto !important; word-wrap: break-word; overflow-wrap: break-word; }

Layout checklist:

• No fixed height on any text container
• box-sizing: border-box applied globally
• word-wrap: break-word and overflow-wrap: break-word on all text containers
• Layout uses min-height instead of height where needed

Rule 4: High-Density Text Fill

高密度填充：设定正文 line-height: 1.5 左右。必须硬性规定下游 AI：每页正文需生成 800-1000 字，彻底填满多栏网格，严防底部留白。

Set body text line-height: 1.5. Every article page MUST generate 800-1000 characters of body text per page to completely fill the multi-column grid. Prevent bottom whitespace.

.article-body { line-height: 1.5; font-size: 15px; }

Density checklist:

• line-height: 1.5 on body text
• Each article page generates 800-1000 characters
• Both columns filled to near bottom
• No excessive whitespace at page bottom (target <15% empty)
• If text is short, expand content or combine pages

Page Type Quick Reference

Typography Strategy

• Primary CJK font: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
• Reference fonts from PDF: PingFangSC-Regular + Helvetica
• Heading weight: 700 (bold)
• Body weight: 400 (regular)
• All text elements use the same font stack for CJK compatibility.

Color Palette

Known Issues to Prevent (from Judge Feedback)

1. NEVER create blank pages between cover and TOC or TOC and articles
2. NEVER use single-column layout on first page of articles - dual-column always
3. NEVER omit the cover teasers (right-side boxes) or bottom info bar
4. NEVER split TOC across multiple pages - keep on one page
5. NEVER leave 50%+ whitespace at bottom of article pages
6. ALWAYS place page numbers consistently (bottom-left or bottom-right)
7. ALWAYS use grid-template-columns: 1fr 1fr for dual-column, not column-count