# Customization Guide — Hero Section 09 (Editorial Magazine)

This guide explains how to customize the assets, styling, and content of the Editorial Magazine Hero Section (`Hero-09`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Brandmark:** Edit the text `Aura` or replace the inline SVG icon with your own signature or company logo:
  ```html
  <a href="#" class="logo-link">
    Aura
  </a>
  ```
- **Navigation Links:** Modify nav links inside `<nav class="main-nav">` in `index.html`. Make sure to sync edits to `<nav class="mobile-nav">`.

---

## 2. Text Content & Typography
The typography styles use **Cormorant Garamond** (for editorial serif headings) and **Inter** (for body copy) loaded via Google Fonts.
- **Headline:** Update the `h1` tag inside the `.hero-left` container. The serif letters are separated by line breaks for magazine layout:
  ```html
  <h1 class="hero-title">
    Crafting <br>
    Stories <br>
    Through <br>
    <span class="accent-text">Design.</span>
  </h1>
  ```
- **Introduction:** Locate `.hero-description` and update the paragraph.

---

## 3. Changing Theme Colors
All colors, card backgrounds, and gradient glows are mapped to CSS custom variables in `:root` scope of `style.css`:
```css
:root {
  --color-bg: #F7F4EF;                 /* Warm Ivory / Off-white */
  --color-card-bg: rgba(250, 248, 244, 0.9); /* soft paper beige */
  --color-text: #1A1A1A;               /* Dark Charcoal Text */
  --color-text-muted: #7A7A7A;         /* Muted Gray text */
  --color-accent: #B88A44;             /* Muted Gold Accent */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 4. Modifying Showcase Portrait Image
The magazine image is styled using an aspect-ratio of `4 / 5` inside the `.image-showcase` container.
To swap the image:
1. Copy your portrait image (recommended dimensions: `800x1000px` or larger, in JPG/PNG/WebP format) to the `assets/images/` directory.
2. Update the `src` attribute of the `<img>` tag in `index.html`:
  ```html
  <img src="assets/images/showcase-portrait.jpg" alt="Collection Editorial" class="showcase-img">
  ```
3. The image uses `object-fit: cover` and scales dynamically based on container heights.
