The Obsidian Assembly

Apply this obsidian-inspired museum gallery design to your existing project. Create a sophisticated landing page with curved architectural elements, warm neutral tones, and elegant typography.

## Layout Structure

Build a full-viewport hero section with a large curved archway as the central focal point. The layout features:

- Semi-transparent navigation header with logo on left, center nav items, and menu button on right
- Large curved arch frame containing the main content area
- Central text overlay with serif display typography
- Background blend of warm beige/taupe gradient with architectural photography
- Floating UI elements positioned outside the arch frame
- Bottom accent elements suggesting additional content sections

## Key Components

**Curved Arch Container**: Create a large rounded rectangle frame using CSS clip-path or border-radius, filled with a translucent overlay that contains the main content. The arch should feel like looking through a portal.

**Typography Hierarchy**: Use an elegant serif font for the main display text "Nothing Shown First" with generous letter spacing. Secondary text uses smaller sans-serif. All text should be white/light colored for contrast.

**Navigation**: Minimal horizontal navigation bar with subtle transparency, featuring clean sans-serif typography and a rounded menu button.

**Floating Elements**: Small decorative objects positioned outside the main arch frame to create visual interest and depth.

**Background Treatment**: Blend photographic elements with gradient overlays, maintaining warm neutral tones throughout.

## Responsive Behavior

- Mobile: Stack elements vertically, reduce arch curvature, maintain text hierarchy
- Tablet: Scale proportionally, adjust arch dimensions
- Desktop: Full theatrical presentation with maximum arch prominence

## Design Specification

<design-specification>
```jsonc
{
  "project": {
    "name": "Obsidian Gallery Landing",
    "description": "Sophisticated landing page with curved architectural archway, warm neutrals, and museum-quality typography"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#8B7355", "dark": "#8B7355" },
      "secondary-500": { "light": "#A68B5B", "dark": "#A68B5B" },
      "neutral-50": { "light": "#FAF7F2", "dark": "#1A1A1A" },
      "neutral-100": { "light": "#F5F0E8", "dark": "#262626" },
      "neutral-200": { "light": "#E8DDD0", "dark": "#404040" },
      "neutral-800": { "light": "#3C2E26", "dark": "#E8DDD0" },
      "neutral-900": { "light": "#2A1F1A", "dark": "#FAF7F2" },
      "accent-amber": { "light": "#D4AF37", "dark": "#D4AF37" },
      "overlay-dark": { "light": "rgba(0,0,0,0.3)", "dark": "rgba(0,0,0,0.5)" },
      "overlay-light": { "light": "rgba(255,255,255,0.15)", "dark": "rgba(255,255,255,0.1)" }
    },
    "typography": {
      "families": { 
        "serif": "Playfair Display, Georgia, serif",
        "sans": "Inter, system-ui, sans-serif" 
      },
      "sizes": { 
        "xs": "12px", 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "48px",
        "4xl": "64px",
        "5xl": "96px"
      },
      "weights": { 
        "normal": "400", 
        "medium": "500", 
        "semibold": "600", 
        "bold": "700" 
      },
      "lineHeights": { 
        "tight": "0.9", 
        "normal": "1.5", 
        "relaxed": "1.75" 
      },
      "letterSpacing": { 
        "tight": "-0.025em", 
        "normal": "0em", 
        "wide": "0.05em",
        "wider": "0.1em"
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "4xl": "96px",
      "rationale": "Progressive scale emphasizing generous whitespace for museum-quality presentation"
    },
    "radii": {
      "sm": "4px",
      "md": "8px", 
      "lg": "16px", 
      "xl": "24px",
      "2xl": "32px",
      "arch": "50% 50% 0 0",
      "full": "9999px"
    },
    "shadows": {
      "sm": { "light": "0 2px 8px rgba(0,0,0,0.1)", "dark": "0 2px 8px rgba(0,0,0,0.3)" },
      "md": { "light": "0 8px 32px rgba(0,0,0,0.15)", "dark": "0 8px 32px rgba(0,0,0,0.4)" },
      "arch": { "light": "inset 0 0 64px rgba(0,0,0,0.2)", "dark": "inset 0 0 64px rgba(0,0,0,0.5)" }
    }
  },
  "screens": [
    {
      "name": "Gallery Landing",
      "route": "/",
      "layout": "Full viewport hero with curved archway portal containing main content, floating decorative elements",
      "components": [
        {
          "name": "Navigation Header",
          "type": "header",
          "properties": {
            "background": "tokens.colors.overlay-light",
            "backdropBlur": "8px",
            "padding": "tokens.spacing.lg tokens.spacing.xl",
            "fontFamily": "tokens.typography.families.sans",
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.medium"
          },
          "states": {
            "default": { "opacity": "0.95" },
            "hover": { "opacity": "1" }
          }
        },
        {
          "name": "Arch Portal",
          "type": "section",
          "properties": {
            "width": "80vw",
            "height": "70vh",
            "maxWidth": "1200px",
            "borderRadius": "tokens.radii.arch",
            "background": "tokens.colors.overlay-dark",
            "backdropBlur": "12px",
            "boxShadow": "tokens.shadows.arch",
            "position": "relative",
            "overflow": "hidden"
          },
          "states": {
            "default": {},
            "hover": { "transform": "scale(1.02)" }
          }
        },
        {
          "name": "Hero Typography",
          "type": "div",
          "properties": {
            "fontFamily": "tokens.typography.families.serif",
            "fontSize": "tokens.typography.sizes.5xl",
            "fontWeight": "tokens.typography.weights.normal",
            "lineHeight": "tokens.typography.lineHeights.tight",
            "letterSpacing": "tokens.typography.letterSpacing.wide",
            "color": "tokens.colors.neutral-50",
            "textAlign": "center"
          },
          "states": {
            "default": {},
            "hover": {}
          }
        },
        {
          "name": "Secondary Text",
          "type": "p",
          "properties": {
            "fontFamily": "tokens.typography.families.sans",
            "fontSize": "tokens.typography.sizes.lg",
            "fontWeight": "tokens.typography.weights.normal",
            "color": "tokens.colors.neutral-200",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          },
          "states": {
            "default": {},
            "hover": {}
          }
        },
        {
          "name": "Action Button",
          "type": "button",
          "properties": {
            "background": "tokens.colors.neutral-50",
            "color": "tokens.colors.neutral-900",
            "padding": "tokens.spacing.md tokens.spacing.xl",
            "borderRadius": "tokens.radii.full",
            "fontFamily": "tokens.typography.families.sans",
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.medium",
            "letterSpacing": "tokens.typography.letterSpacing.wider",
            "textTransform": "uppercase"
          },
          "states": {
            "default": { "opacity": "0.9" },
            "hover": { "opacity": "1", "transform": "translateY(-2px)" }
          }
        }
      ]
    }
  ]
}
```
</design-specification>

Implement using CSS Grid or Flexbox for the overall layout, with the arch created using border-radius or clip-path. Use backdrop-filter for the glass-morphism effects on overlays. The background should blend multiple layers including gradients and photographic elements with CSS mix-blend-mode for sophisticated color interactions.

Copy this prompt and paste it into your AI coding assistant to build this design.