# Typography System

## Display / Marquee Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Editorial serif or distinctive sans — the voice of identity |
| **Examples** | Helvetica Neue ME, Ogg Medium, Editorial New, Fraunces (display), Playfair Display |
| **Weight** | 400-600 (medium — the scale carries weight, not the weight) |
| **Tracking** | -0.02em to 0 (tight — marquee text must read as a unit) |
| **Size** | Giant marquee scale — `16vh` to `26vh` (viewport-height-based) |
| **Transform** | Uppercase for marquee; sentence case for other display |

**Why these fonts:** The marquee name must be distinctive enough to function as identity, not just text. Helvetica Neue ME has the editorial weight of magazine mastheads. Ogg Medium has a warm, humanist quality. The font choice IS the brand — it's the most prominent element on the page.

**Marquee size:** The marquee is sized in viewport height units (`vh`), not `rem` or `px`. This ensures the name fills the viewport vertically regardless of screen size. `16vh` on desktop, `26vh` on mobile (larger relative to smaller viewport).

---

## Body / UI Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display or clean sans — coherent voice |
| **Examples** | Helvetica Neue ME, Inter (400/500), Söhne (if licensed) |
| **Weight** | 400-500 |
| **Tracking** | 0 to 0.02em (normal to slightly open) |
| **Size** | 14-16px (medium — readable but not competing with marquee) |
| **Line Height** | 1.5-1.6 (normal) |

**Why same family:** Using the same font for marquee and UI creates coherence — the entire page speaks with one voice. The marquee is just the same font at giant scale. This coherence is what makes the single composition feel unified, not collaged.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, lighter weight, wider tracking |
| **Examples** | Helvetica Neue ME (300/400), Inter (400) |
| **Weight** | 300-400 |
| **Tracking** | 0.1em-0.15em (wide, editorial) |
| **Size** | 11-12px (small — chrome should be minimal) |
| **Transform** | UPPERCASE for labels; sentence case for footer blurb |

**Usage:** Navigation links, social links, footer blurb, section labels. These small text elements provide function without competing with the marquee composition.

---

## Type Scale

**Ratio:** Marquee is outside the normal scale (viewport-based). Other type follows 1.4x:

```
Marquee:    16vh (desktop) / 26vh (mobile)  — viewport-based
Display:    clamp(1.5rem, 3vw, 2.5rem)       — 1.4x
Body:       14-16px                          — baseline
Micro:      11-12px                          — 0.75x
```

---

## Font Pairing Logic

**Single family:** This style typically uses ONE font family for everything — marquee, body, and micro. The variation comes from size, weight, and tracking, not from mixing families. This creates the unified voice that makes the single composition feel coherent.

**Optional second family:** If a second font is needed for contrast, use a serif italic for the footer blurb or a specific accent phrase. But the default is single-family coherence.

**Never mix:** Don't use more than 2 typeface families. The single composition requires typographic unity — multiple fonts make it feel like a collage, not a composition.

# Color Architecture

## Ground

```css
--color-ground: #1a1a1a;      /* Dark photographic background (or the photo itself) */
--color-ground-deep: #0a0a0a;  /* Deeper dark for edges */
```

**Why dark photographic:** The background is typically a dark photograph — a portrait, a scene, an environment. The ground color is the darkest tone of that photo, not a separate background color. The photo IS the ground.

---

## Text

```css
--color-text-primary: #efeee9;   /* Cream — the signature text color */
--color-text-secondary: #c4c3be; /* Slightly darker cream for secondary */
--color-text-muted: #8a8985;     /* Muted cream for chrome */
```

**Why cream #efeee9:** This specific cream feels like magazine print on dark stock — warm enough to feel printed, bright enough to be readable on dark photography. It's not white (too clinical), not amber (too warm), not gray (too cold). It's the color of editorial cream — the paper stock of art magazines.

---

## Accent

```css
/* This style typically has NO accent color */
/* The cream text on dark photo IS the contrast */
```

**Rule:** This style typically uses NO accent color. The cream-on-dark contrast is sufficient. If an accent is absolutely necessary, use a slightly brighter cream (#f5f4f0) for hover states — never a different hue.

**Why no accent:** The single composition is about restraint. Adding an accent color would make it feel like a designed page, not a magazine cover. The cream text, the dark photo, and the marquee are enough. An accent would be clutter.

---

## Semantic Colors

```css
/* Minimal semantic colors — this style avoids UI-heavy elements */
--color-success: #6a8a5a; /* Muted green (rarely used) */
--color-error: #c46a5a;   /* Muted red (rarely used) */
```

**This style minimizes semantic colors** because it minimizes UI. There are no form fields, no status badges, no data tables. The page is a portrait, a name, and minimal chrome.

---

## The Color Rule

> **Cream on dark. That's it.** #efeee9 text on dark photographic background. No accent color, no gradients, no multiple hues. The restraint IS the style.

---

## Gradient Policy

**No gradients.** The background is a photograph, not a gradient. The text is cream, not gradient. The only "gradient" is the natural tonal variation of the photograph itself.

---

## Color Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Pure white (#FFFFFF) text | Cream #efeee9 |
| Accent colors (blue, amber, etc.) | No accent — cream only |
| Light backgrounds | Dark photographic background |
| Multiple text colors | Cream primary, slightly darker cream secondary |
| Gradient backgrounds | Photographic background |
| Neon or saturated colors | Muted, editorial cream |
| Color-coded UI elements | Minimal UI — no color coding needed |

# Motion Principles

## Philosophy

Motion in Editorial Portrait is **layered and staggered**. The marquee scrolls infinitely — constant, perpetual motion that gives the composition life. Entrance animations are staggered — each element fades or rises into place with a slight delay from the previous one, creating a "reveal" sequence like a magazine cover being assembled. The motion is editorial — dramatic but controlled, never bouncy, never playful.

---

## Ambient Animation: Infinite Marquee

| Property | Specification |
|----------|--------------|
| **Element** | Giant name text, duplicated for seamless loop |
| **Animation** | `translateX(0) → (-50%)` — scrolls left infinitely |
| **Duration** | 30s |
| **Easing** | `linear` (constant speed — marquee must be smooth, not eased) |
| **Repeat** | `infinite` |
| **Size** | `16vh` (desktop) / `26vh` (mobile) |

**Implementation:**
```css
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
```

The marquee content is duplicated (the name appears twice) so that when the first copy scrolls off-screen left, the second copy is in position, creating a seamless infinite loop.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Background photo | Opacity fade-in | 1200ms | `ease-out` | 0ms |
| Portrait cutout | Rise-in (translateY 20px → 0) + opacity | 1400ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 300ms |
| Marquee | Starts scrolling immediately (no entrance) | — | — | 0ms |
| Brand name (header) | Fade-up (translateY 8px → 0) + opacity | 900ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 800ms |
| Nav links | Fade-up, staggered | 900ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 1000ms + i*80ms |
| Social links | Fade-up, staggered | 900ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 1000ms + i*80ms |
| Footer blurb | Fade-up | 900ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 1400ms |
| Cream rule line | scaleX(0 → 1) | 1100ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 1200ms |

**Key easing:** `cubic-bezier(0.22, 1, 0.36, 1)` for all entrance animations. Smooth deceleration, no bounce.

**Staggered principle:** Elements don't all appear at once. They reveal in sequence: background → portrait → chrome (brand, nav, social, footer). This creates the "magazine cover being assembled" feeling.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Hero scroll | **None.** The hero is a single composition — no scrolling within it. |
| Page scroll | The hero fills the viewport; scrolling reveals additional content below (if any) |
| Parallax | **None.** The composition is static; only the marquee moves. |

**The hero does not respond to scroll.** It exists as a complete composition. Scrolling moves past it to additional content, but the composition itself doesn't change based on scroll position.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Cream → slightly brighter cream (#f5f4f0) (300ms) | — |
| Social links | Cream → slightly brighter cream (300ms) | — |
| Portrait cutout | No hover state — it's a composition element | — |
| Marquee | No hover state — it's perpetual motion | — |
| Footer blurb | No hover state — it's static text | — |

**Hover states are minimal.** Only interactive chrome (nav, social) responds. The composition elements (portrait, marquee) are static — they're the design, not the UI.

---

## Mobile Drawer Animation

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Drawer background | Opacity fade-in | 300ms | `ease-out` | 0ms |
| Drawer panel | Slide-in from right (translateX 100% → 0) | 400ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 0ms |
| Drawer links | Fade-up, staggered | 600ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 200ms + i*60ms |

**Mobile drawer:** On mobile, the nav becomes a hamburger that opens a right-slide-in drawer. The drawer links reveal with staggered fade-up, maintaining the editorial staggered entrance principle.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Marquee stops scrolling (becomes static text)
- All entrance animations collapse to instant opacity changes
- No staggered reveals (all elements appear together)
- Mobile drawer uses instant slide (no transition)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| ❌ Never animate | Why |
|-----------------|-----|
| Bounce or spring easing | Too playful — this is editorial, not bouncy |
| Color transitions | Cream is cream — no color changes |
| Scale transforms on portrait | The composition is static — only the marquee moves |
| Parallax on background | The composition is a single image, not layers responding to scroll |
| Pulsing or flashing | Too aggressive — the marquee is the only motion |
| Multiple elements moving simultaneously | Staggered reveals only — one at a time |

# Layout Grammar

## Grid System

**No grid. Single layered composition.**

This style has no grid system. The entire hero is one composition — elements are positioned absolutely, layered by z-index, and sized relative to the viewport. There are no columns, no rows, no gutters. The layout is a magazine cover, not a web page.

```
┌─────────────────────────────────────────┐
│ [background photo, full viewport]        │
│                                         │
│  [giant marquee name, scrolling]         │
│  ← MARCUS — BENNET — MARCUS — BENNET ←   │
│                                         │
│         [portrait cutout, centered]       │
│                                         │
│  Brand          Nav    Social            │
│  ─────────────────────────────────       │
│  Footer blurb left    Footer blurb right │
└─────────────────────────────────────────┘
```

---

## Z-Index Stack

The layering is critical — each element must be in the correct z-index position:

| Layer | Z-Index | Element |
|------|---------|---------|
| 1 | default (0) | Background photo |
| 2 | z-10 | Giant marquee name (scrolling) |
| 3 | z-10 | Cream rule line (horizontal divider) |
| 4 | z-10 | Footer blurb |
| 5 | z-20 | Portrait cutout (overlaps marquee) |
| 6 | z-30 | Header (brand name, nav, social) |
| 7 | z-40 | Mobile drawer (when open) |
| 8 | z-50 | Hamburger icon (mobile) |

**The portrait cutout (z-20) overlaps the marquee (z-10).** This is the critical layering — the name reads through the portrait. The marquee letters are visible behind the cutout, creating the layered depth that defines the composition.

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `h-[100dvh]` (NOT `min-h` — exactly one viewport) |
| Overflow | `overflow-hidden` (marquee extends beyond viewport) |
| Background | Full-viewport photograph (dark, portrait or scene) |
| Marquee | Horizontal, centered vertically, `16vh` size (desktop) / `26vh` (mobile) |
| Portrait cutout | Centered, overlapping marquee, transparent PNG |
| Header | Top: brand left, nav+social right (desktop) or hamburger (mobile) |
| Footer | Bottom: blurb left, blurb right, cream rule line above |

**Never scrollable hero.** The hero is exactly one viewport — `h-[100dvh]` with `overflow-hidden`. The marquee extends beyond the viewport edges but is clipped. Scrolling moves past the hero to additional content.

---

## Section Spacing

```css
/* Hero has no spacing — it's a single composition */
--content-below-padding: clamp(4rem, 10vh, 8rem);
--content-max-width: min(1100px, calc(100vw - clamp(2rem, 8vw, 6rem)));
```

**Content below the hero** (if any) uses standard editorial spacing. But the hero itself has no spacing — it's a full-viewport composition.

---

## Layout Patterns

### Pattern 1: Single Composition Hero (THE pattern)
```
┌─────────────────────────────────────────┐
│ [BG photo]                               │
│  Brand                    Nav  Social     │
│                                         │
│  ← MARCUS — BENNET — MARCUS — BENNET ←   │
│         [portrait cutout]                 │
│                                         │
│  ──────────────────────────────────────  │
│  Visuals Composer       Digital Crafter │
└─────────────────────────────────────────┘
```

### Pattern 2: Mobile Drawer
```
┌─────────────────────────────────────────┐
│ [BG photo]                    [hamburger]│
│                                         │
│  ← MARCUS — BENNET — MARCUS — BENNET ←   │
│         [portrait cutout]                 │
│                                         │
│  Visuals Composer       Digital Crafter │
└─────────────────────────────────────────┘
         ↓ (hamburger tap)
┌─────────────────────────────────────────┐
│                            ┌────────────┐│
│                            │ Work       ││
│                            │ About      ││
│                            │ Contact    ││
│                            │ Instagram  ││
│                            │ Twitter    ││
│                            └────────────┘│
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (768px+)** | Full composition: brand+nav+social top, marquee+portrait center, footer bottom |
| **Mobile (375px)** | Hamburger replaces nav+social, marquee size increases to `26vh`, portrait scales proportionally |

**Fluid marquee sizing:** The marquee uses `vh` units — `16vh` on desktop, `26vh` on mobile. The larger mobile size compensates for the smaller viewport, ensuring the name fills the screen vertically on all devices.

---

## Layout Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Scrollable hero | Single composition, `h-[100dvh]`, `overflow-hidden` |
| Multiple sections in hero | One composition — everything in one viewport |
| Card layouts | No cards — portrait + marquee only |
| Centered text blocks | Layered composition — text is part of the image |
| Grid systems | No grid — absolute positioning, z-index layering |
| Floating UI elements | Minimal chrome at edges only |
| Pills, badges, or buttons | No UI elements — this is a portrait, not a dashboard |
| Separate text and image zones | Portrait overlaps marquee — they're one composition |

# Texture & Surface

## Primary Texture: Photographic Background

**The defining element.** A full-viewport photograph — typically a portrait, scene, or environment — serves as both the background and the primary visual content. The photo is dark enough to support cream text but detailed enough to provide visual interest.

### Photo Specifications

| Property | Specification |
|----------|--------------|
| **Content** | Portrait, scene, or environment relevant to the brand |
| **Exposure** | Dark — underexposed enough for cream text readability |
| **Composition** | Central subject with darker areas at edges for text placement |
| **Resolution** | High — full viewport at retina density |
| **Position** | Full-bleed, covers entire viewport |

---

## Secondary Texture: Portrait Cutout

A clean transparent PNG of the subject (person, object) that overlaps the marquee. The cutout has no background — it's a silhouette that sits on top of the marquee, creating the layered depth.

### Cutout Specifications

| Property | Specification |
|----------|--------------|
| **Format** | Transparent PNG (alpha channel) |
| **Quality** | Clean edges — no jagged pixels, no residual background |
| **Position** | Centered, overlapping the marquee vertically |
| **Z-index** | z-20 (above marquee, below chrome) |
| **Pointer events** | `pointer-events: none` (doesn't block marquee or chrome) |

**The cutout must be clean.** Jagged edges or residual background destroy the editorial quality. Use professional masking tools (Photoshop Select Subject, remove.bg with manual cleanup) to ensure pixel-perfect edges.

---

## Tertiary Texture: Cream Rule Line

A thin horizontal line in cream (#efeee9) that separates the footer blurb from the main composition. This is the only "graphic" element — a single hairline that provides structure without decoration.

```css
.cream-rule {
  height: 1px;
  background: #efeee9;
  transform-origin: left;
  /* Entrance animation: scaleX(0 → 1), 1100ms, delay 1200ms */
}
```

---

## Image Processing Rules

**Minimal processing.** The photo should look like a real photograph, not a processed image:

| Processing | Effect | When to Use |
|-----------|--------|-------------|
| Darkening | Underexpose for text readability | If photo is too bright |
| Slight desaturation | Muted, editorial quality | Optional, for mood |
| No grain overlay | The photo IS the texture | Never add grain — it's already photographic |
| No dither or halftone | This is not Dither Mono | Clean photography only |

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Full-viewport photograph (dark) |
| Portrait cutout | Transparent PNG, no background |
| Text | Cream (#efeee9) directly on photo — no text backgrounds, no cards |
| Chrome (nav, social) | Transparent, cream text, directly on photo |
| Cream rule line | 1px hairline, cream color |
| Mobile drawer | Semi-transparent dark panel (rgba(0,0,0,0.9)) |

**No cards, no panels, no surfaces.** Everything sits directly on the photograph. The only "surface" is the mobile drawer, which is a semi-transparent dark panel that slides in from the right.

---

## Texture Don'ts

| ❌ Don't | ✅ Do Instead |
|----------|--------------|
| Grain or noise overlay | The photo IS the texture — no overlay needed |
| Dither or halftone processing | Clean photography — this is not Dither Mono |
| Cards or panels on the photo | Text directly on photo — no intermediate surfaces |
| Glassmorphic elements | Transparent text on photo — no frosted glass |
| Gradient overlays | The photo's natural tonal variation is sufficient |
| Multiple photographs | One photo — the single composition principle |
| Bright, saturated photos | Dark, underexposed, editorial quality |
| Stock photo aesthetics | Professional photography — this is a portrait, not a stock image |

# Vocabulary Bank

## Primary Terms (must appear in prompt to unlock the style)

| Term | Why It Matters |
|------|---------------|
| `giant marquee name` | The scrolling identity — infinite horizontal motion |
| `portrait cutout overlay` | The layered depth — cutout overlaps marquee |
| `single composition` | The layout principle — everything in one viewport |
| `cream on dark` | The color palette — #efeee9 on dark photo |
| `editorial serif` | The typographic voice — magazine masthead quality |
| `no scroll on hero` | The structural rule — hero is a fixed composition |

---

## Secondary Terms (refine and tune the output)

| Term | Effect |
|------|--------|
| `magazine cover` | The layout reference — one image, one name, minimal chrome |
| `infinite marquee` | The motion — 30s linear, never stops |
| `layered depth` | The z-index stack — photo → marquee → cutout → chrome |
| `minimal chrome` | The UI principle — nav and social at edges only |
| `cream rule line` | The one graphic element — 1px hairline divider |
| `staggered entrance` | The reveal sequence — elements appear in order |
| `transparent PNG cutout` | The portrait format — clean edges, no background |
| `viewport-height marquee` | The sizing — 16vh desktop, 26vh mobile |
| `z-index stack` | The layering — critical for composition |
| `mobile drawer` | The responsive nav — right slide-in with staggered links |

---

## Context Terms (set the mood and emotional register)

| Term | Mood |
|------|------|
| `personal` | Individual, intimate, about one person |
| `editorial` | Magazine quality, published, curated |
| `dramatic` | Bold, striking, memorable |
| `marquee` | Scrolling, perpetual, identity |
| `intimate` | Close, personal, not corporate |
| `magazine cover` | One composition, one image, one name |
| `portrait` | About the person, not the product |
| `presence` | The person IS the brand |

---

## Banned Terms (if these appear, the style has broken)

| Term | Why It Breaks the Style |
|------|------------------------|
| `scrolling hero` | The hero is a single composition — no scrolling within it |
| `card layouts` | No cards — portrait + marquee only |
| `purple accents` | No accent colors — cream only |
| `multiple sections in hero` | One composition — everything in one viewport |
| `grid system` | No grid — absolute positioning, z-index layering |
| `pills` / `badges` / `buttons` | No UI elements — this is a portrait, not a dashboard |
| `glow` / `neon` | No glowing effects — editorial restraint |
| `bounce` / `spring` | Motion is staggered and editorial, not playful |
| `white text` | Cream #efeee9, not white |
| `gradient` | The photo IS the background — no gradients |
| `feature grid` | No features — this is a portrait page |
| `CTA button` | Minimal chrome — no prominent CTAs |

---

## Prompt-Ready Phrases

Copy-paste these directly into prompts:

```
"single composition hero — no scroll, one viewport"
"giant marquee name scrolling infinitely (30s linear)"
"portrait cutout (transparent PNG) overlapping marquee at z-20"
"cream text (#efeee9) on dark photographic background"
"editorial serif display at 16vh (desktop) / 26vh (mobile)"
"minimal chrome — nav and social at edges only"
"staggered entrance animations (cubic-bezier(0.22, 1, 0.36, 1))"
"z-index stack: photo → marquee → cutout → chrome"
"cream rule line (1px hairline) above footer blurb"
"mobile drawer with staggered link reveals"
"no cards, no pills, no glow, no accent colors"
"magazine cover come to life"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Personal portfolios** | The single composition IS the person — portrait, name, identity. Perfect for designers, developers, and creatives who ARE their brand. |
| **Photographer sites** | The photographic background speaks the language of photography. The portrait cutout showcases the photographer's craft. |
| **Creative directors** | The editorial, magazine-cover aesthetic signals creative authority. The marquee name creates memorable presence. |
| **Editorial features** | Magazine-style profiles of individuals. The single composition mimics a magazine cover. |
| **Artist websites** | The portrait + name composition centers the artist as the brand. Minimal chrome lets the work speak. |
| **Personal brand sites** | For consultants, speakers, thought leaders whose identity IS their product. |
| **Model/actor portfolios** | The portrait cutout is literally the product. The marquee name creates star presence. |

## Brand Personality Match

This style reinforces brands that are:
- **Personal** — about one person, not a company
- **Editorial** — magazine quality, published, curated
- **Dramatic** — bold, striking, memorable
- **Intimate** — close, not corporate
- **Minimal** — everything essential, nothing extra

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Company/corporate sites** | The single-person composition doesn't work for companies with teams and products. |
| **E-commerce** | No product display, no shopping flow, no CTAs. The portrait composition is anti-commercial. |
| **SaaS products** | No feature sections, no pricing, no product details. The style is a portrait, not a product page. |
| **Data platforms** | No data display, no dashboards, no metrics. The single composition can't support data. |
| **Content-heavy sites** | The hero is one viewport — no room for articles, blog posts, or content listings. |
| **Multi-product brands** | The single composition focuses on one identity, not a product catalog. |
| **Sites needing conversion** | No prominent CTAs, no conversion flow. The style is about presence, not action. |

## How to Decide

Ask: **"Is this page about ONE person, and should it feel like a magazine cover?"**

If yes → Editorial Portrait.
If no → Consider Dark Cinematic Studio (more creative studio), Classical Remix (more scholarly), or Quiet Editorial (more minimal).

# Reference Gallery

## Live Sites

### Awwwards — Personal Portfolio Winners
- **What works:** Single composition heroes, giant marquee names, portrait cutouts, cream on dark, minimal chrome
- **Search:** Awwwards "portfolio" + "personal" filter, "editorial" tag

### Photographer & Creative Director Portfolios
- **What works:** Full-viewport portraits, layered text over image, minimal navigation, magazine-cover layouts
- **Search:** Top photographer portfolio sites, creative director personal sites

### Magazine Cover Design
- **What works:** Single composition, one image + one name + minimal text, layered depth
- **Search:** Magazine cover design archives (Vogue, Vanity Fair, Time)

## Key Visual References

### Giant Marquee Name
- **Font:** Helvetica Neue ME, Ogg Medium, or distinctive editorial serif
- **Size:** 16vh (desktop) / 26vh (mobile) — viewport-height-based
- **Animation:** Infinite horizontal scroll, 30s linear
- **Content:** Name duplicated for seamless loop ("MARCUS — BENNET — MARCUS — BENNET")

### Portrait Cutout
- **Format:** Transparent PNG with clean edges
- **Position:** Centered, overlapping marquee (z-20)
- **Quality:** Professional masking — no jagged edges, no residual background
- **Pointer events:** None (doesn't block marquee or chrome)

### Z-Index Stack
- **Layer 1 (z-0):** Background photo (full viewport)
- **Layer 2 (z-10):** Giant marquee name (scrolling)
- **Layer 3 (z-10):** Cream rule line + footer blurb
- **Layer 4 (z-20):** Portrait cutout (overlaps marquee)
- **Layer 5 (z-30):** Header (brand, nav, social)
- **Layer 6 (z-40):** Mobile drawer (when open)
- **Layer 7 (z-50):** Hamburger icon (mobile)

### Cream Rule Line
- **Style:** 1px hairline, cream (#efeee9)
- **Position:** Above footer blurb, full width
- **Animation:** scaleX(0 → 1), 1100ms, delay 1200ms

## Typography Reference
- **Helvetica Neue ME** or **Ogg Medium** at 16vh/26vh — giant marquee
- **Same family** at 14-16px — body and UI text
- **Same family** at 11-12px, tracking 0.1em — micro labels

## Screenshot Notes

> When capturing references for this style, look for:
> - The quality of the portrait cutout (clean edges, no residual background)
> - The marquee size relative to viewport (should fill vertically)
> - The cream text color (not white, not amber — specific editorial cream)
> - The minimal chrome (nav and social at edges, not prominent)
> - The z-index layering (portrait over marquee, chrome over all)
> - The single composition (everything in one viewport, no scroll)
> - The cream rule line (the one graphic element)
> - The mobile drawer (right slide-in with staggered links)