/**
 * Kayla Kamm Studio - Main Stylesheet
 * Archival Modernism aesthetic with subtle material textures
 */

/* ===============================================
   BACKGROUND TEXTURE SYSTEM
   Task 2.3: Paper grain texture overlay and backgrounds
   ===============================================
   Implements subtle paper grain texture overlay
   and parchment background for period aesthetic.
*/

body {
  background-color: var(--color-parchment);
  position: relative;
  min-height: 100vh;
}

/**
 * Paper Grain Texture Overlay
 * Creates subtle paper texture using CSS noise pattern.
 * Applied as fixed pseudo-element to maintain texture during scroll.
 * Performance: Uses GPU-accelerated properties (transform, opacity).
 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-below);
  opacity: var(--texture-opacity);

  /**
   * CSS Noise Pattern
   * Creates grainy paper texture using SVG filter.
   * The data URI embeds an SVG with feTurbulence for organic grain.
   * baseFrequency: 0.9 creates fine-grain texture
   * numOctaves: 4 adds complexity to the noise
   */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;

  /* GPU acceleration for smooth scrolling performance */
  will-change: opacity;
  transform: translateZ(0);
}

/**
 * Optional Vignette Effect
 * Subtle darkening around viewport edges for depth.
 * Applied as separate pseudo-element for better control.
 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-below);
  opacity: var(--vignette-opacity);

  /**
   * Radial gradient vignette
   * Creates subtle shadow from edges toward center.
   * Ellipse shape follows viewport proportions.
   * 70% transparent center, fading to darker edges.
   */
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(26, 26, 26, 0.15) 100%
  );

  /* GPU acceleration */
  will-change: opacity;
  transform: translateZ(0);
}

/**
 * Reduced Motion Support
 * Respects user's motion preferences for accessibility.
 * Simplifies or removes animated texture effects.
 */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    /* Ensure texture remains static */
    animation: none;
    transition: none;
  }
}

/**
 * High-Resolution Display Optimization
 * Ensures crisp texture rendering on Retina displays.
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body::before {
    /* Higher frequency noise for sharper detail on high-DPI screens */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
}

/* ===============================================
   FALLBACK SUPPORT
   ===============================================
   Ensures graceful degradation in older browsers.
*/

/**
 * Legacy Browser Fallback
 * For browsers that don't support CSS filters or SVG data URIs.
 * Falls back to solid parchment color (already set on body).
 */
@supports not (background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E")) {
  body::before {
    /* Fallback: Simple repeating pattern using CSS gradients */
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(26, 26, 26, 0.02) 2px,
        rgba(26, 26, 26, 0.02) 4px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(26, 26, 26, 0.02) 2px,
        rgba(26, 26, 26, 0.02) 4px
      );
  }
}

/* ===============================================
   BASE GRID SYSTEM - 12 Column Responsive Layout
   Task 2.2: Core grid implementation
   =============================================== */

/**
 * Container - Maximum width centered container
 * Provides consistent horizontal padding and centers content
 */
.container {
  width: 100%;
  max-width: var(--max-content-width); /* 1400px from variables.css */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

/**
 * Grid - 12-column CSS Grid layout
 * Responsive: Single column on mobile, 2 columns on tablet, 12 columns on desktop
 */
.grid {
  display: grid;
  gap: var(--grid-gutter); /* clamp(1rem, 4vw, 3rem) */

  /* Mobile: Single column (default) */
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 12 columns (1024px+) */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* ===============================================
   COLUMN SPANNING UTILITIES
   =============================================== */

/**
 * Desktop column span classes (1-12)
 * Only apply on desktop (1024px+) to maintain single column on mobile
 */
@media (min-width: 1024px) {
  .col-span-1 { grid-column: span 1; }
  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }
  .col-span-4 { grid-column: span 4; }
  .col-span-5 { grid-column: span 5; }
  .col-span-6 { grid-column: span 6; }
  .col-span-7 { grid-column: span 7; }
  .col-span-8 { grid-column: span 8; }
  .col-span-9 { grid-column: span 9; }
  .col-span-10 { grid-column: span 10; }
  .col-span-11 { grid-column: span 11; }
  .col-span-12 { grid-column: span 12; }
}

/**
 * Tablet-specific column span utilities
 * For 2-column layouts on tablet (640px - 1023px)
 */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Span both columns on tablet */
  .col-span-2-md { grid-column: span 2; }

  /* Span single column on tablet (default, but explicit) */
  .col-span-1-md { grid-column: span 1; }
}

/**
 * Medium+ breakpoint utilities (768px+)
 * For more flexible responsive control
 */
@media (min-width: 768px) {
  .col-span-6-md { grid-column: span 6; }
  .col-span-4-md { grid-column: span 4; }
  .col-span-8-md { grid-column: span 8; }
}

/* ===============================================
   FULL-BLEED UTILITY
   =============================================== */

/**
 * Full-bleed - Breaks out of container for full viewport width
 * Useful for hero sections and full-width images
 */
.full-bleed {
  width: 100vw;
  margin-left: calc(-1 * var(--grid-gutter));
  margin-right: calc(-1 * var(--grid-gutter));
  max-width: none;
}

/* Adjust full-bleed for nested containers */
.container .full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ===============================================
   VERTICAL RHYTHM & SPACING
   =============================================== */

/**
 * Section wrapper - Consistent vertical padding for major sections
 * Uses 8px base unit for vertical rhythm
 */
.section {
  padding-top: var(--section-padding);    /* clamp(4rem, 10vh, 8rem) */
  padding-bottom: var(--section-padding);
}

/**
 * Spacing utilities based on 8px system
 * Use these for consistent margins and padding throughout
 */
.mt-xs { margin-top: var(--space-xs); }       /* 8px */
.mt-sm { margin-top: var(--space-sm); }       /* 16px */
.mt-md { margin-top: var(--space-md); }       /* 24px */
.mt-lg { margin-top: var(--space-lg); }       /* 32px */
.mt-xl { margin-top: var(--space-xl); }       /* 48px */
.mt-xxl { margin-top: var(--space-xxl); }     /* 64px */

.mb-xs { margin-bottom: var(--space-xs); }    /* 8px */
.mb-sm { margin-bottom: var(--space-sm); }    /* 16px */
.mb-md { margin-bottom: var(--space-md); }    /* 24px */
.mb-lg { margin-bottom: var(--space-lg); }    /* 32px */
.mb-xl { margin-bottom: var(--space-xl); }    /* 48px */
.mb-xxl { margin-bottom: var(--space-xxl); }  /* 64px */

.pt-xs { padding-top: var(--space-xs); }      /* 8px */
.pt-sm { padding-top: var(--space-sm); }      /* 16px */
.pt-md { padding-top: var(--space-md); }      /* 24px */
.pt-lg { padding-top: var(--space-lg); }      /* 32px */
.pt-xl { padding-top: var(--space-xl); }      /* 48px */
.pt-xxl { padding-top: var(--space-xxl); }    /* 64px */

.pb-xs { padding-bottom: var(--space-xs); }   /* 8px */
.pb-sm { padding-bottom: var(--space-sm); }   /* 16px */
.pb-md { padding-bottom: var(--space-md); }   /* 24px */
.pb-lg { padding-bottom: var(--space-lg); }   /* 32px */
.pb-xl { padding-bottom: var(--space-xl); }   /* 48px */
.pb-xxl { padding-bottom: var(--space-xxl); } /* 64px */

/* ===============================================
   SECTION DIVIDERS & ORNAMENTAL ELEMENTS
   Task 2.4: Decorative elements for section separation
   =============================================== */

/**
 * Section Divider Component
 * Creates a horizontal rule with a centered ornamental character.
 * CSS-only implementation for crisp rendering and maintainability.
 *
 * Usage: <div class="section-divider">◆</div>
 */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-iron);
  font-size: var(--text-small);
  margin: var(--space-xl) 0;
  text-align: center;
}

/* Horizontal lines extending from ornament */
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-bone);
}

/**
 * Section Number Component
 * Subtle positioning numbers (01, 02, 03) for sections.
 * Provides elegant visual organization without dominance.
 *
 * Usage: <span class="section-number">01</span>
 */
.section-number {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 300;
  color: var(--color-iron);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-block;
}

/**
 * Alternative divider styles for variety
 * These can be used in different sections for subtle variation
 */

/* Divider with asterisk ornament */
.section-divider--asterisk {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-iron);
  font-size: 1rem;
  margin: var(--space-xl) 0;
  text-align: center;
}

.section-divider--asterisk::before,
.section-divider--asterisk::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-bone);
}

/* Simple line divider without ornament */
.section-divider--simple {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: var(--color-bone);
  margin: var(--space-xl) auto;
  border: none;
}

/* Ornamental positioning when section number is in corner */
.section-number--corner {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
}

/* Responsive adjustments for dividers */
@media (max-width: 768px) {
  .section-divider,
  .section-divider--asterisk {
    gap: 0.75rem;
    margin: var(--space-lg) 0;
  }

  .section-number {
    font-size: 0.75rem;
  }

  .section-number--corner {
    top: var(--space-sm);
    left: var(--space-sm);
  }
}

/* ===============================================
   BASE STYLES
   Task 2.1: Foundation for navigation
   =============================================== */

html {
  scroll-behavior: smooth;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
}

/* ===============================================
   SKIP LINK (Accessibility)
   Task 2.1: Keyboard navigation enhancement
   =============================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-toast);
  padding: 1rem 2rem;
  background-color: var(--color-rust);
  color: var(--color-parchment);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-small);
}

.skip-link:focus {
  top: var(--space-sm);
  left: var(--space-sm);
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ===============================================
   NAVIGATION - HEADER & CONTAINER
   Task 2.1: Navigation structure and sticky behavior
   =============================================== */

.site-header {
  position: relative;
  z-index: var(--z-elevated);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg);
  background-color: transparent;
  transition: background-color var(--duration-medium) var(--ease-standard),
              box-shadow var(--duration-medium) var(--ease-standard);
  z-index: var(--z-elevated);
}

/* Sticky navigation state (applied via JavaScript after scrolling) */
.nav--sticky {
  background-color: rgba(247, 243, 237, 0.95); /* Parchment with slight transparency */
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.06);
}

/* ===============================================
   DESKTOP NAVIGATION
   Task 2.1: Horizontal menu with smooth interactions
   =============================================== */

.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-iron);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

/* Underline animation - grows from center */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-verdigris);
  transform: translateX(-50%);
  transition: width var(--duration-fast) var(--ease-standard);
}

.nav-link:hover {
  color: var(--color-verdigris);
}

.nav-link:hover::after {
  width: 100%;
}

/* Focus state for keyboard navigation */
.nav-link:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-subtle);
}

/* Active state (applied via JavaScript when section is in viewport) */
.nav-link.active {
  color: var(--color-verdigris);
}

.nav-link.active::after {
  width: 100%;
}

/* ===============================================
   MOBILE NAVIGATION - HAMBURGER MENU
   Task 2.1: Mobile menu toggle button
   =============================================== */

.nav-toggle {
  display: none; /* Hidden on desktop, shown on mobile */
  position: fixed;
  top: var(--space-md);
  right: var(--space-lg);
  z-index: calc(var(--z-modal) + 10);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: var(--space-sm);
  background-color: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.nav-toggle-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-iron);
  transition: transform var(--duration-medium) var(--ease-standard),
              opacity var(--duration-medium) var(--ease-standard);
  border-radius: 2px;
}

/* Hamburger to X animation */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-small);
}

/* ===============================================
   MOBILE NAVIGATION - DRAWER
   Task 2.1: Slide-in mobile menu
   =============================================== */

.nav-drawer {
  display: none; /* Hidden on desktop, shown on mobile */
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen */
  width: min(320px, 85vw);
  height: 100vh;
  background-color: var(--color-parchment);
  box-shadow: -4px 0 16px rgba(26, 26, 26, 0.15);
  z-index: var(--z-modal);
  padding: var(--space-xxl) var(--space-lg);
  transition: right var(--duration-medium) var(--ease-standard);
  overflow-y: auto;
}

/* Drawer open state */
.nav-drawer.is-open {
  right: 0;
}

.nav-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: var(--space-sm);
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* X close icon */
.nav-close-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.nav-close-icon::before,
.nav-close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-iron);
  border-radius: 2px;
}

.nav-close-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.nav-close-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

.nav-close:hover .nav-close-icon::before,
.nav-close:hover .nav-close-icon::after {
  background-color: var(--color-rust);
}

.nav-close:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-small);
}

.nav-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.nav-drawer-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--color-iron);
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  border-bottom: 1px solid var(--color-bone);
}

.nav-drawer-link:hover {
  color: var(--color-verdigris);
  transform: translateX(8px);
}

.nav-drawer-link:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-subtle);
}

/* ===============================================
   MOBILE NAVIGATION - OVERLAY
   Task 2.1: Background overlay for mobile menu
   =============================================== */

.nav-overlay {
  display: none; /* Hidden on desktop, shown on mobile */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(26, 26, 26, 0.4);
  z-index: calc(var(--z-overlay) + 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-standard);
}

/* Overlay visible state */
.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* ===============================================
   RESPONSIVE - MOBILE BREAKPOINT
   Task 2.1: Show/hide navigation elements
   =============================================== */

@media (max-width: 767px) {
  /* Hide desktop navigation */
  .nav-list {
    display: none;
  }

  /* Show mobile menu elements */
  .nav-toggle {
    display: flex;
  }

  .nav-drawer {
    display: block;
  }

  .nav-overlay {
    display: block;
  }

  /* Adjust nav padding on mobile */
  .nav {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ===============================================
   HERO SECTION
   Task 3.1: Full-viewport hero with typography and background
   =============================================== */

/**
 * Hero Container
 * Full viewport height with centered content.
 * Background uses parchment with texture (from Task 2.3).
 * Optional subtle gradient overlay for depth.
 */
#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-xxl) var(--grid-gutter);
  text-align: center;
  overflow: hidden;

  /* Optional: Subtle gradient overlay for depth */
  background: linear-gradient(
    to bottom,
    rgba(247, 243, 237, 0.3) 0%,
    rgba(247, 243, 237, 0.1) 50%,
    rgba(247, 243, 237, 0.3) 100%
  );
}

/**
 * Hero Content Wrapper
 * Ensures proper stacking and spacing of hero elements.
 */
#hero > * {
  position: relative;
  z-index: var(--z-normal);
}

/**
 * Hero Heading - Studio Name
 * Cormorant Garamond with fluid responsive sizing.
 * Elegant serif typography for the studio name.
 */
#hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero); /* clamp(3rem, 8vw, 6rem) */
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em; /* Slight negative tracking for display type */

  /* Animation setup - initially hidden */
  opacity: 0;
  transform: translateY(20px);

  /* Staggered fade-in animation */
  animation: fadeUp 800ms var(--ease-decelerate) forwards;
  animation-delay: 0ms; /* Studio name appears first */
}

/**
 * Hero Tagline
 * DM Sans for clean, readable tagline.
 * Smaller scale, complementary to hero heading.
 */
#hero .tagline {
  font-family: var(--font-body);
  font-size: var(--text-h3); /* clamp(1.25rem, 2vw, 1.5rem) */
  font-weight: 400;
  color: var(--color-iron);
  line-height: 1.4;
  margin: 0;
  max-width: 600px; /* Constrain line length for readability */

  /* Animation setup - initially hidden */
  opacity: 0;
  transform: translateY(20px);

  /* Staggered fade-in animation */
  animation: fadeUp 800ms var(--ease-decelerate) forwards;
  animation-delay: 150ms; /* Tagline appears after studio name */
}

/* ===============================================
   HERO ANIMATIONS
   Task 3.1: Staggered fade-in on page load
   =============================================== */

/**
 * Fade-Up Keyframe Animation
 * Smooth entrance animation for hero elements.
 * Combines opacity fade with upward translation.
 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Reduced Motion Support
 * Respects user's motion preferences for accessibility.
 * Disables animations if user prefers reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  #hero h1,
  #hero .tagline {
    /* Disable animations */
    animation: none;

    /* Ensure content is immediately visible */
    opacity: 1;
    transform: none;
  }
}

/* ===============================================
   HERO RESPONSIVE DESIGN
   Task 3.1: Mobile and tablet adaptations
   =============================================== */

/**
 * Mobile Hero Adjustments (< 768px)
 * Maintains vertical centering while optimizing for small screens.
 */
@media (max-width: 767px) {
  #hero {
    /* Adjust padding for mobile */
    padding: var(--space-xl) var(--space-md);
    min-height: 100vh; /* Maintain full viewport height */
  }

  #hero h1 {
    /* Ensure readable size on mobile */
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em; /* Slightly less tight on mobile */
  }

  #hero .tagline {
    /* Optimize tagline for mobile */
    max-width: 100%;
    padding: 0 var(--space-sm);
  }
}

/**
 * Tablet Hero Adjustments (768px - 1023px)
 * Intermediate sizing for tablet viewports.
 */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero {
    padding: var(--space-xxl) var(--space-xl);
  }

  #hero .tagline {
    max-width: 500px;
  }
}

/**
 * Large Desktop Adjustments (1440px+)
 * Optimizes spacing for very large viewports.
 */
@media (min-width: 1440px) {
  #hero h1 {
    margin-bottom: var(--space-lg);
  }

  #hero .tagline {
    max-width: 700px;
  }
}

/* ===============================================
   PROJECTS SECTION
   Task 3.4: Projects section grid and layout
   =============================================== */

/**
 * Projects Section Container
 * Provides consistent section padding and max-width
 */
#projects {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  position: relative;
}

/**
 * Projects Section Header
 * Includes section number, divider, and heading
 */
.projects-header {
  text-align: center;
  margin-bottom: var(--space-xxl);
}

/**
 * Projects Section Heading
 * Uses Cormorant Garamond display font
 */
#projects h2,
#projects-heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

/**
 * Projects Grid - Responsive Masonry Layout
 * Desktop (1024px+): 3-column grid
 * Tablet (768-1023px): 2-column grid
 * Mobile (< 768px): Single column
 */
.projects-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);

  /* Mobile: Single column (default) */
  grid-template-columns: 1fr;
}

/* Tablet: 2-column grid (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3-column grid (1024px+) */
@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/**
 * Project Card Component
 * Individual project card with image and metadata
 */
.project-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  position: relative;
  transition: transform var(--duration-medium) var(--ease-standard);
}

/**
 * Project Card Image Container
 * Maintains aspect ratio and handles image overflow
 */
.project-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bone);
  border: 1px solid var(--color-bone);
  margin-bottom: var(--space-md);
}

/**
 * Project Card Image Overlay
 * Dark overlay that fades in on hover with "View Project" text
 */
.project-card__image::after {
  content: 'View Project';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 26, 26, 0.7);
  color: var(--color-parchment);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-standard);
  pointer-events: none;
}

/**
 * Project Card Image
 * Styled with subtle desaturation for cohesion
 */
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
  transition: transform var(--duration-medium) var(--ease-standard),
              filter var(--duration-medium) var(--ease-standard);
}

/**
 * Project Card Hover State
 * Subtle zoom effect on image and overlay fade-in (desktop only)
 */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card__image img {
    transform: scale(1.02);
  }

  .project-card:hover .project-card__image::after {
    opacity: 1;
  }
}

/**
 * Project Card Content
 * Typography and metadata container
 */
.project-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/**
 * Project Title
 * Primary heading for each project
 */
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.3;
}

/**
 * Project Production Name
 * Secondary information about the show/production
 */
.project-card__production {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-iron);
  margin: 0;
}

/**
 * Project Year
 * Metadata for project date
 */
.project-card__year {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-iron);
  margin: 0;
}

/**
 * Project Role
 * Designer's role in the project
 */
.project-card__role {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-rust);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/**
 * Responsive Adjustments for Project Cards
 */
@media (max-width: 767px) {
  .project-card__title {
    font-size: 1.5rem;
  }

  .project-card__image {
    aspect-ratio: 3 / 2;
  }
}

/**
 * Accessibility - Reduced Motion
 * Disable transitions for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card__image img {
    transition: none;
  }
}

/* ===============================================
   ABOUT SECTION LAYOUT
   Task 3.2: Two-column layout with image and biography
   =============================================== */

/**
 * About Section Container
 * Uses .section class for consistent vertical padding
 * Contains grid layout for image and text content
 */
#about {
  position: relative;
}

/**
 * About Section Heading
 * Cormorant Garamond display font with responsive sizing
 */
#about h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-xl);
  text-align: left;
}

/**
 * About Content Grid
 * Desktop: Two-column layout (image 40-42% | text 58-60%)
 * Uses existing .grid class from Task 2.2 with column spanning
 */
.about-content {
  margin-top: var(--space-xxl);
  align-items: start;
}

/**
 * About Image Column
 * Spans 5 of 12 columns on desktop (~42%)
 * Image wrapper provides "mounted photograph" aesthetic
 */
.about-image {
  width: 100%;
}

/**
 * Image Wrapper
 * Creates "mounted photograph" effect with subtle shadow and border
 * Maintains aspect ratio and prevents image distortion
 */
.about-image .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-subtle);

  /* Mounted photograph aesthetic */
  box-shadow:
    0 2px 8px rgba(26, 26, 26, 0.08),
    0 8px 24px rgba(26, 26, 26, 0.06),
    inset 0 0 0 1px var(--color-bone);

  /* Subtle border suggesting frame */
  background-color: var(--color-parchment);
  padding: 0.5rem;
}

/**
 * About Image
 * Fills wrapper while maintaining aspect ratio
 * Lazy loading for performance
 */
.about-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--radius-subtle) - 0.25rem);

  /* Prevent image distortion */
  aspect-ratio: 3 / 4;
}

/**
 * About Text Column
 * Spans 7 of 12 columns on desktop (~58%)
 * Contains biography paragraphs and pull quote
 */
.about-text {
  width: 100%;
}

/**
 * About Text Paragraphs
 * DM Sans body font with comfortable line height
 * Readable line length maintained
 */
.about-text p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
  max-width: 65ch; /* Optimal reading length */
}

/**
 * Pull Quote
 * EB Garamond italic for personal, handwritten quality
 * Visually distinct from body text
 */
.pull-quote {
  margin: var(--space-xxl) 0;
  padding-left: var(--space-xl);
  border-left: 3px solid var(--color-rust);
  position: relative;
}

.pull-quote p {
  font-family: var(--font-accent);
  font-size: var(--text-h3);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-iron);
  margin-bottom: 0;
  max-width: none;
}

/**
 * Optional: Pull quote decorative element
 * Subtle opening quotation mark
 */
.pull-quote::before {
  content: '\201C'; /* Opening curly quote */
  position: absolute;
  left: -0.5rem;
  top: -0.25rem;
  font-size: 4rem;
  font-family: var(--font-accent);
  color: var(--color-bone);
  line-height: 1;
  opacity: 0.5;
}

/* ===============================================
   ABOUT SECTION - RESPONSIVE LAYOUT
   =============================================== */

/**
 * Tablet Layout (768px - 1023px)
 * Maintain two-column layout but with adjusted proportions
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-content {
    gap: var(--grid-gutter);
  }

  .about-image,
  .about-text {
    grid-column: span 6; /* Each takes half */
  }

  .pull-quote {
    padding-left: var(--space-lg);
  }
}

/**
 * Mobile Layout (< 768px)
 * Single column stack: image above text
 * Image full-width or centered with max-width
 */
@media (max-width: 767px) {
  .about-content {
    grid-template-columns: 1fr; /* Single column */
    gap: var(--space-xl);
  }

  .about-image,
  .about-text {
    grid-column: 1; /* Both in same column */
  }

  /* Center image with max-width on mobile */
  .about-image {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Adjust heading size on mobile */
  #about h2 {
    font-size: var(--text-h2);
    margin-bottom: var(--space-lg);
  }

  /* Adjust pull quote on mobile */
  .pull-quote {
    margin: var(--space-xl) 0;
    padding-left: var(--space-md);
  }

  .pull-quote p {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
  }

  .pull-quote::before {
    font-size: 3rem;
  }
}

/**
 * Small Mobile (< 480px)
 * Further adjustments for very small screens
 */
@media (max-width: 479px) {
  .about-image .image-wrapper {
    padding: 0.25rem;
  }

  .about-text p {
    font-size: 1rem;
  }
}

/* ===============================================
   FOOTER COMPONENT
   Task 3.8: Minimal footer with copyright and back-to-top
   =============================================== */

/**
 * Site Footer
 * Minimal design with subtle text and centered layout.
 * Includes copyright notice, back-to-top link, and optional social links.
 */
.site-footer {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-parchment);
  border-top: 1px solid var(--color-bone);
}

/**
 * Footer Content Container
 * Centers content and controls max-width for readability.
 */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--max-content-width);
  margin: 0 auto;
  text-align: center;
}

/**
 * Copyright Text
 * Subtle styling in iron color with smaller font size.
 */
.copyright {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-iron);
  margin: 0;
  line-height: 1.5;
}

/**
 * Footer Navigation
 * Container for back-to-top link.
 */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * Back to Top Link
 * Styled as text link with arrow, changes color on hover.
 */
.back-to-top {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-iron);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  transition: color var(--duration-fast) var(--ease-standard);
  border-radius: var(--radius-subtle);
}

.back-to-top:hover {
  color: var(--color-verdigris);
}

.back-to-top:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  color: var(--color-verdigris);
}

/**
 * Footer Social Links
 * Simple text links for social media (Instagram, LinkedIn).
 * Placeholder links that can be updated with actual URLs.
 */
.footer-social {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social a {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-iron);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  transition: color var(--duration-fast) var(--ease-standard);
  border-radius: var(--radius-subtle);
}

.footer-social a:hover {
  color: var(--color-verdigris);
}

.footer-social a:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  color: var(--color-verdigris);
}

/* ===============================================
   FOOTER RESPONSIVE STYLES
   =============================================== */

/**
 * Mobile Footer Adjustments
 * Maintains stacked layout on mobile with adequate spacing.
 */
@media (max-width: 767px) {
  .site-footer {
    padding: var(--space-lg) var(--space-md);
  }

  .footer-content {
    gap: var(--space-sm);
  }

  .footer-social {
    gap: var(--space-md);
  }

  /* Ensure touch targets are adequate on mobile */
  .back-to-top,
  .footer-social a {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/**
 * Tablet and Desktop Adjustments
 * Optional: Could switch to horizontal layout on larger screens.
 * Currently maintains centered vertical stack for simplicity.
 */
@media (min-width: 768px) {
  /* Optional: Horizontal layout for desktop */
  /* Uncomment below if horizontal footer is preferred:

  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer-nav {
    order: 2;
  }

  .footer-social {
    order: 3;
  }

  */
}

/**
 * Reduced Motion Support
 * Respects user's motion preferences for accessibility.
 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .footer-social a {
    transition: none;
  }
}

/* ===============================================
   CONTACT SECTION - LAYOUT & STRUCTURE
   Task 3.6: Contact section with elegant form
   =============================================== */

/**
 * Contact Section Container
 * Provides consistent vertical spacing and section structure.
 */
#contact {
  padding-top: var(--section-padding);    /* clamp(4rem, 10vh, 8rem) */
  padding-bottom: var(--section-padding);
  position: relative;
}

/**
 * Contact Section Heading
 * Section title in Cormorant Garamond with proper hierarchy.
 */
#contact h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);              /* clamp(1.75rem, 3vw, 2.5rem) */
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
  margin-bottom: var(--space-xl);         /* 48px */
}

/**
 * Section Number "03"
 * Positioned subtly above the heading.
 */
#contact .section-number {
  display: block;
  text-align: center;
  margin-bottom: var(--space-md);         /* 24px */
}

/**
 * Section Divider
 * Decorative element above the Contact heading.
 */
#contact .section-divider {
  margin-bottom: var(--space-xl);         /* 48px */
}

/**
 * Contact Content Container
 * Centers form and additional contact information.
 */
.contact-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/**
 * Contact Form
 * Elegant single-column form layout.
 */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);                   /* 32px */
  margin-bottom: var(--space-xxl);        /* 64px */
}

/**
 * Form Field Container
 * Wraps label and input for consistent spacing.
 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                   /* 8px */
}

/**
 * Form Labels
 * Positioned above inputs with DM Sans font.
 * Required fields indicated with asterisk.
 */
.form-field label {
  font-family: var(--font-body);
  font-size: 0.9375rem;                   /* 15px */
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

.form-field label span[aria-label="required"] {
  color: var(--color-rust);
  margin-left: 2px;
}

/**
 * Text Inputs and Select Dropdown
 * Vintage ledger aesthetic with subtle borders.
 */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background-color: var(--color-parchment);
  border: 1.5px solid var(--color-bone);
  border-radius: 2px;
  padding: 0.875rem 1rem;                 /* 14px 16px */
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  width: 100%;
}

/**
 * Textarea
 * Multi-line message input with consistent styling.
 */
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background-color: var(--color-parchment);
  border: 1.5px solid var(--color-bone);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  width: 100%;
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

/**
 * Input Focus States
 * Verdigris accent with subtle glow for accessibility.
 */
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-verdigris);
  box-shadow: 0 0 0 3px rgba(74, 124, 111, 0.1);
}

/**
 * Select Dropdown Styling
 * Custom appearance for dropdown arrow.
 */
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234A4A48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/**
 * Placeholder Styling
 * Subtle iron color for placeholder text.
 */
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-iron);
  opacity: 0.6;
}

/**
 * Submit Button
 * Prominent rust-colored CTA button.
 */
.contact-form button[type="submit"] {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-parchment);
  background-color: var(--color-rust);
  border: none;
  border-radius: 2px;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  align-self: flex-start;
  letter-spacing: 0.02em;
}

.contact-form button[type="submit"]:hover {
  background-color: #6f3610;              /* Darker rust on hover */
  transform: translateY(-1px);
}

.contact-form button[type="submit"]:active {
  transform: translateY(0);
}

.contact-form button[type="submit"]:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-iron);
}

/**
 * Alternative Contact Information
 * Email address displayed below form.
 */
.alternative-contact {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-iron);
  text-align: center;
  margin-bottom: var(--space-lg);         /* 32px */
  line-height: 1.6;
}

.alternative-contact a {
  color: var(--color-rust);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-standard);
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.alternative-contact a:hover {
  color: var(--color-verdigris);
  border-bottom-color: var(--color-verdigris);
}

.alternative-contact a:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-subtle);
}

/**
 * Privacy Statement
 * Small disclaimer text in iron color.
 */
.privacy-note {
  font-family: var(--font-body);
  font-size: var(--text-small);          /* 0.875rem */
  color: var(--color-iron);
  text-align: center;
  line-height: 1.5;
  opacity: 0.8;
}

/* ===============================================
   CONTACT SECTION - RESPONSIVE ADJUSTMENTS
   =============================================== */

/**
 * Mobile Adjustments (< 640px)
 * Reduce padding and adjust button to full width on small screens.
 */
@media (max-width: 639px) {
  .contact-content {
    padding: 0 var(--space-md);
  }

  .contact-form {
    gap: var(--space-md);                 /* 24px on mobile */
  }

  .contact-form button[type="submit"] {
    width: 100%;
    align-self: stretch;
  }

  #contact h2 {
    margin-bottom: var(--space-lg);       /* Reduce heading spacing on mobile */
  }
}

/**
 * Tablet Adjustments (640px - 767px)
 * Slightly reduce container max-width for better proportions.
 */
@media (min-width: 640px) and (max-width: 767px) {
  .contact-content {
    max-width: 600px;
  }
}

/* ===============================================
   FORM VALIDATION & ERROR STATES
   Task 4.2: Error styling for form validation
   =============================================== */

/**
 * Field Error State
 * Applied when validation fails
 */
.form-field input.error,
.form-field textarea.error,
.form-field select.error {
  border-color: var(--color-rust);
  border-width: 2px;
}

/**
 * Field Error Message
 * Inline error message displayed below invalid field
 */
.field-error {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;              /* 13px */
  color: var(--color-rust);
  margin-top: var(--space-xs);       /* 8px */
  line-height: 1.4;
}

/**
 * Form Success Message
 * Displayed when form submits successfully
 */
.form-message {
  padding: var(--space-lg);
  border-radius: var(--radius-small);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.form-message--success {
  background-color: rgba(74, 124, 111, 0.1);  /* Verdigris with transparency */
  border: 2px solid var(--color-verdigris);
  color: var(--color-ink);
}

.form-message--success strong {
  color: var(--color-verdigris);
}

/**
 * Form Error Message
 * Displayed when form submission fails
 */
.form-message--error {
  background-color: rgba(139, 69, 19, 0.1);   /* Rust with transparency */
  border: 2px solid var(--color-rust);
  color: var(--color-ink);
}

.form-message--error strong {
  color: var(--color-rust);
}

.form-message--error a {
  color: var(--color-rust);
  text-decoration: underline;
  font-weight: 500;
}

.form-message--error a:hover {
  color: var(--color-verdigris);
}

.form-message p {
  margin: 0;
  line-height: 1.6;
}