================================================================
  OBSIDIAN — Dark Cinematic Photography Portfolio
  Free Template by ShutterNoise (shutternoise.com)
================================================================

WHAT'S INCLUDED
  index.html — Your complete portfolio website (single file)

QUICK START
  1. Open index.html in any text editor (VS Code, Notepad++, etc.)
  2. Make the changes below
  3. Upload to your web host
  That's it. No build tools, no npm, no frameworks.

================================================================
CUSTOMIZATION GUIDE
================================================================

BRANDING & TEXT
  Search and replace these to personalize:

  "Obsidian"              → Your brand name (appears in nav + preloader)
  "Capturing the"         → Your headline (hero section)
  "unseen light"          → Your headline continued
  "Photography & Visual   → Your tagline
   Storytelling"
  "Based in your city"    → Your actual location
  "— Your Name"           → Your actual name (about section)
  "hello@yourdomain.com"  → Your email address (contact section)

SOCIAL LINKS
  Find the "contact-socials" div near the bottom. Update the
  href="#" links to your actual social profiles:

  <a href="#">Instagram</a>   → <a href="https://instagram.com/you">Instagram</a>
  <a href="#">Behance</a>     → <a href="https://behance.net/you">Behance</a>

PHOTOS
  All images use Unsplash placeholders. Replace the img src URLs
  with your own photos. Two places per gallery item:

  1. The img tag src — the thumbnail shown in the grid
     Recommended size: 800px wide, JPG, quality 80
  
  2. The data-src attribute — the full-size lightbox image
     Recommended size: 1400-2000px wide, JPG, quality 85

  Example:
    BEFORE: <img src="https://images.unsplash.com/photo-..." 
    AFTER:  <img src="images/my-photo-01.jpg"

    BEFORE: data-src="https://images.unsplash.com/photo-..."
    AFTER:  data-src="images/my-photo-01-full.jpg"

  Tip: Create an "images" folder next to index.html for your photos.

ADDING MORE GALLERY ITEMS
  Copy one of the existing gallery-item divs and paste it after
  the last one. Update the image sources and text. The grid will
  automatically accommodate additional items.

COLORS
  Find the :root section at the top of the <style> block.
  Key variables to change:

  --bg:#0a0a0a          → Page background (dark)
  --accent:#c9a96e      → Gold accent color
  --text:#e8e4df        → Main text color

  Popular accent alternatives:
    Warm gold:    #c9a96e  (default)
    Cool silver:  #a8b2bc
    Rose:         #c4787a
    Emerald:      #6b9e8a
    Copper:       #b87333

FONTS
  The template uses Google Fonts loaded in the <head> tag:
  - Cormorant Garamond (headings — elegant serif)
  - Darker Grotesque (body — clean sans-serif)

  To change fonts, visit fonts.google.com, pick your fonts,
  and replace both the <link> tag URL and the font-family
  values in the :root CSS variables.

SERVICES SECTION
  Find the "services-grid" div. Edit the four service cards
  with your actual offerings. Change titles and descriptions.

NAVIGATION
  The nav links scroll to sections on the page. If you rename
  a section's id, update the matching href in the nav.

================================================================
HOSTING
================================================================
  This is a static HTML file — it works on ANY web host:
  - GoDaddy, Bluehost, SiteGround, etc.
  - Netlify, Vercel, GitHub Pages (all free)
  - Any FTP upload to a shared hosting account

  Just upload index.html (and your images folder) and you're live.

================================================================
FEATURES INCLUDED
================================================================
  ✓ Animated preloader with brand name
  ✓ Custom cursor effect (desktop only)
  ✓ Full-screen lightbox with keyboard navigation
  ✓ Scroll-triggered reveal animations
  ✓ Parallax hero effect
  ✓ Film grain texture overlay
  ✓ Mobile responsive with hamburger menu
  ✓ Smooth scrolling navigation
  ✓ No external dependencies (except Google Fonts)
  ✓ SEO-friendly semantic HTML

================================================================
CREDITS & LICENSE
================================================================
  Free template by ShutterNoise — shutternoise.com
  
  You are free to:
  ✓ Use this for personal or commercial projects
  ✓ Modify it however you like
  ✓ Use it for client work
  
  We just ask that you:
  → Keep the "Free template by ShutterNoise" credit in the footer
    (it's small and unobtrusive — helps us keep making free stuff)
  
  Placeholder photos are from Unsplash (unsplash.com) and should
  be replaced with your own work before publishing.

  Questions? Visit shutternoise.com
================================================================
