get-shit-pretty 0.7.0 → 0.7.3

package/gsp/skills/gsp-style/styles/academia.md

@@ -1,787 +1,751 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
-
-Before proposing or writing any code, first build a clear mental model of the current system:
-
-- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
-- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
-- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
-- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
-
-Ask the user focused questions to understand the user's goals. Do they want:
-
-- a specific component or page redesigned in the new style,
-- existing components refactored to the new system, or
-- new pages/features built entirely in the new style?
-
-Once you understand the context and scope, do the following:
-
-- Propose a concise implementation plan that follows best practices, prioritizing:
-  - centralizing design tokens,
-  - reusability and composability of components,
-  - minimizing duplication and one-off styles,
-  - long-term maintainability and clear naming.
-- When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).
-- Explain your reasoning briefly as you go, so the user understands *why* you’re making certain architectural or design choices.
-
-Always aim to:
-
-- Preserve or improve accessibility.
-- Maintain visual consistency with the provided design system.
-- Leave the codebase in a cleaner, more coherent state than you found it.
-- Ensure layouts are responsive and usable across devices.
-- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.
-
-</role>
-
-<design-system>
-# Design Style: Academia / Classical
-
-## Design Philosophy
-
-**Core Principles**: Scholarly gravitas meets timeless elegance. This style channels the atmosphere of centuries-old university libraries, Victorian study halls, and Renaissance manuscripts. Every element must feel like it belongs in a prestigious institution - combining **rich material references** (aged parchment, dark mahogany wood, polished brass hardware, crimson leather bindings) with **traditional typographic excellence** and **measured ornamentation**.
-
-**Vibe**: Scholarly, Prestigious, Warm, Timeless, Dignified, Intellectual, Distinguished.
-
-**The Academia Promise**: This isn't a modern dark theme with serif fonts. It's a complete transformation into a physical library environment where every interaction feels like turning pages in a leather-bound tome, where brass fixtures catch the light, and where centuries of knowledge create an atmosphere of gravitas and trust.
-
----
-
-## Design Token System (The DNA)
-
-### Color System (Library at Night)
-
-**Foundation Colors**:
-
-- **background**: `#1C1714` (Deep Mahogany) - The darkest wood tone, foundation of all layouts
-- **backgroundAlt**: `#251E19` (Aged Oak) - Surface elevation, cards, and panel backgrounds
-- **foreground**: `#E8DFD4` (Antique Parchment) - Primary text, warm cream tone
-- **muted**: `#3D332B` (Worn Leather) - Tertiary backgrounds, disabled states
-- **mutedForeground**: `#9C8B7A` (Faded Ink) - Secondary text, labels, metadata
-- **border**: `#4A3F35` (Wood Grain) - Subtle borders and dividers
-
-**Accent Colors**:
-
-- **accent**: `#C9A962` (Polished Brass) - Primary interactive color, highlights, focus states
-- **accentSecondary**: `#8B2635` (Library Crimson) - Emphasis badges, hover transforms
-- **accentForeground**: `#1C1714` (Dark on Brass) - Text on brass-colored buttons
-
-**Color Usage Rules**:
-
-1. **Contrast Ratios**: Maintain 8.5:1 for parchment on mahogany, minimum 4.5:1 for muted text
-2. **Layering Strategy**: Always layer backgroundAlt on top of background for depth (cards, panels)
-3. **Brass Application**: Use brass for ALL interactive elements (buttons, links, focus rings, icons)
-4. **Crimson Sparingly**: Reserve crimson for special emphasis (featured pricing tier, wax seals, hover transforms on secondary buttons)
-5. **Border Subtlety**: Borders should be visible but never harsh - wood grain color provides gentle separation
-
-**Brass Gradient Formula** (for buttons and metallic elements):
-
-```
-background: linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)
-```
-
-This creates authentic polished brass with highlights and shadows.
-
-### Typography System
-
-**Font Families**:
-
-- **Heading Font**: `"Cormorant Garamond", serif` - High-contrast old-style serif with calligraphic elegance
-- **Body Font**: `"Crimson Pro", serif` - Book-style serif designed for extended reading
-- **Display Font**: `"Cinzel", serif` - Engraved, all-caps display font for labels and special emphasis
-
-**Type Scale & Hierarchy**:
-
-- **Display Headings**: `text-5xl` to `text-7xl` (48px-72px), Cormorant Garamond, `leading-[1.1]`, `tracking-tight`
-- **Section Headings**: `text-4xl` to `text-5xl` (36px-48px), Cormorant Garamond
-- **Subsection Headings**: `text-2xl` to `text-3xl` (24px-30px), Cormorant Garamond
-- **Body Text**: `text-base` to `text-lg` (16px-18px), Crimson Pro, `leading-relaxed` (1.625)
-- **Labels/Overlines**: `text-xs` to `text-[10px]` (10px-12px), Cinzel, `uppercase`, `tracking-[0.2em]` to `tracking-[0.3em]`
-
-**Font Weight Distribution**:
-
-- Headings: Regular/Normal (400-500) - avoid heavy weights, let the serif do the work
-- Body: Regular (400)
-- Labels: Medium (500-600) for Cinzel
-- Emphasis: Italic rather than bold for body text
-
-**Special Typography Patterns**:
-
-1. **Drop Caps**: First letter of introductory paragraphs
-
-   - Font: Cinzel (display font)
-   - Size: `text-7xl` (72px), `float-left`, `mr-4`, `leading-[0.8]`
-   - Color: Brass (`#C9A962`)
-   - Shadow: `2px 2px 4px rgba(0,0,0,0.3)` for engraved depth
-2. **Section Numbering**: Use Roman numerals (I, II, III, IV, V...) with "Volume" prefix for major sections
-
-   - Font: Cinzel, `text-xs`, `uppercase`, `tracking-[0.25em]` to `tracking-[0.3em]`
-   - Color: Brass
-   - Pattern: "Volume I", "Volume II", etc. for major section headers; standalone Roman numerals for lists and sub-items
-   - Placement: Positioned above section headings as overline labels
-3. **Engraved Text Effect** (for buttons and special headings):
-
-   - `text-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(255,255,255,0.1)`
-   - Creates pressed-into-metal appearance
-
-### Radius & Border System
-
-**Border Radius Values**:
-
-- **Default**: `4px` (`rounded`) - Subtle, traditional corners for buttons, cards, inputs
-- **Arch-Top Special**: `border-radius: 40% 40% 0 0 / 20% 20% 0 0` - Cathedral arch tops for images
-- **Full Circle**: For icon containers, badges, profile images
-
-**The Arch-Top Signature**:
-This is a defining visual element. The formula creates an elegant arch reminiscent of cathedral windows or library alcoves:
-
-```css
-.arch-top {
-  border-radius: 40% 40% 0 0 / 20% 20% 0 0;
-}
-```
-
-Apply to: Hero images, blog thumbnails, feature images, decorative containers.
-
-**Border Styling**:
-
-- **Thickness**: `1px` standard, `2px` for decorative frames and focus states
-- **Color**: `#4A3F35` (wood grain) for standard borders, `#C9A962` (brass) for interactive/decorative
-- **Pattern**: Single solid borders, avoid dashed or dotted
-
-### Shadows & Depth
-
-**Shadow Philosophy**: Shadows should feel like physical depth in a dimly-lit library - soft, warm, and realistic.
-
-**Shadow Recipes**:
-
-1. **Card Elevation** (default):
-
-   ```
-   shadow: none (rely on border and background differentiation)
-   hover: 0 8px 24px rgba(0,0,0,0.3)
-   ```
-2. **Engraved/Embossed Effect** (buttons, decorative elements):
-
-   ```
-   inset 0 1px 0 rgba(255,255,255,0.2),
-   inset 0 -1px 0 rgba(0,0,0,0.2),
-   0 2px 8px rgba(0,0,0,0.3)
-
-   hover: Add glow via 0 4px 12px rgba(201,169,98,0.3)
-   ```
-3. **Wax Seal Badge**:
-
-   ```
-   inset 0 2px 4px rgba(255,255,255,0.2),
-   inset 0 -2px 4px rgba(0,0,0,0.3),
-   0 4px 8px rgba(0,0,0,0.4)
-   ```
-4. **Focus Ring**:
-
-   ```
-   ring-2 ring-[#C9A962] ring-offset-2 ring-offset-[#1C1714]
-   ```
-
-### Textures & Atmospheric Effects
-
-**1. Aged Paper Texture Overlay**:
-
-- SVG noise filter with fractal turbulence
-- Opacity: `0.03` (extremely subtle)
-- Position: Fixed overlay covering entire viewport
-- Blend mode: `overlay`
-- Purpose: Adds tactile paper grain without overpowering content
-
-**2. Vignette Effect**:
-
-- Radial gradient from center
-- Formula: `radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(28,23,20,0.4) 100%)`
-- Position: Fixed overlay
-- Purpose: Focuses attention toward center, mimics library lighting
-
-**3. Sepia Image Treatment**:
-
-- Default state: `filter: sepia(0.6) contrast(0.95) brightness(0.9)`
-- Hover state: `filter: sepia(0) contrast(1) brightness(1)`
-- Transition: `duration-700 ease-out`
-- Purpose: Images appear as aged photographs that reveal full color on interaction
-
-**4. Decorative Patterns**:
-
-**Ornate Corner Flourishes** (for major frames and cards):
-
-```css
-/* Top-left and bottom-right brass corners */
-.ornate-frame::before,
-.ornate-frame::after {
-  content: "";
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  border: 2px solid #C9A962;
-}
-
-.ornate-frame::before {
-  top: -1px;
-  left: -1px;
-  border-right: none;
-  border-bottom: none;
-}
-
-.ornate-frame::after {
-  bottom: -1px;
-  right: -1px;
-  border-left: none;
-  border-top: none;
-}
-```
-
-**Ornate Divider** (section separators):
-
-```css
-/* Gradient line with centered decorative glyph */
-.ornate-divider {
-  height: 1px;
-  background: linear-gradient(90deg, transparent 0%, #4A3F35 20%, #C9A962 50%, #4A3F35 80%, transparent 100%);
-}
-
-.ornate-divider::before {
-  content: "✶"; /* or other decorative Unicode character */
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #C9A962;
-  font-size: 12px;
-  background: #1C1714;
-  padding: 0 12px;
-}
-```
-
----
-
-## Section Patterns
-
-### Product Detail Section
-
-This section serves as a formal proclamation or manifesto, positioned after stats to elaborate on the value proposition.
-
-**Structure**:
-
-- Container: Ornate frame with corner flourishes
-- Background: `#251E19/50` on rounded border
-- Header: Centered "Proclamation" label with flanking brass lines
-- Headline: Large serif (4xl-6xl) centered with tight line-height
-- Ornate divider: Full decorative divider with centered glyph
-- Body: Multi-paragraph content with drop cap on first paragraph
-- Spacing: Generous padding (p-8 to p-12), centered max-width (max-w-4xl)
-
-**Typography**:
-
-- Label: Cinzel, uppercase, brass color, wide tracking
-- Headline: Cormorant Garamond, extra large, standard color
-- Body: Text-lg, muted foreground color, relaxed leading
-- First paragraph: Drop cap effect automatically applied
-
-This creates a "certificate of excellence" feeling - formal, centered, and authoritative.
-
----
-
-## Component Styling Principles
-
-### Buttons
-
-**Visual Treatment**:
-
-- Font: Cinzel (display font)
-- Text: Uppercase with `tracking-[0.15em]`
-- Size: Small text (`text-xs`) with generous padding for dignified presence
-- Effect: Engraved text shadow for pressed-metal appearance
-
-**Primary Button** (brass, main actions):
-
-- Background: Brass gradient (`linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)`)
-- Text: Dark mahogany (`#1C1714`) for maximum contrast on brass
-- Radius: `4px` (rounded)
-- Shadow: Inset highlights and depth shadows (see shadow system)
-- Hover: Increase brightness to 110%, add brass glow shadow
-- Active: Deeper inset shadow for pressed effect
-
-**Secondary Button** (outlined, alternative actions):
-
-- Background: Transparent
-- Border: `2px solid #C9A962` (brass)
-- Text: Brass (`#C9A962`)
-- Hover: Transform to crimson - `border: #8B2635`, `bg: #8B2635`, `text: #E8DFD4`
-- Purpose: Offers elegant alternative that can dramatically transform
-
-**Ghost Button** (minimal, tertiary actions):
-
-- No background or border
-- Text: Brass with hover underline
-- Underline offset: `4px` for breathing room
-- Hover: Brighten to `#D4B872` with underline
-
-**Button Sizes**:
-
-- Default: `h-12 px-8`
-- Small: `h-10 px-6`
-- Large: `h-14 px-10`
-
-### Cards & Containers
-
-**Structure**:
-
-- Background: `#251E19` (aged oak - one layer above page background)
-- Border: `1px solid #4A3F35` (wood grain)
-- Radius: `4px` (rounded)
-- Padding: `p-8` to `p-12` depending on content density
-- Position: Relative (for corner flourishes)
-
-**Corner Flourish Pattern**:
-
-- Apply `.corner-flourish` class
-- Creates subtle brass corner brackets (24px × 24px)
-- Opacity: 0.6 default, 1.0 on hover
-- Purpose: Frames content like a certificate or portrait
-
-**Hover Behavior**:
-
-- Border: Transition to `#C9A962/50` (brass with transparency)
-- Shadow: Add `0 8px 24px rgba(0,0,0,0.3)` for lift effect
-- Duration: `300ms` ease
-
-**Special Card Treatments**:
-
-1. **Certificate/Ledger Style** (pricing cards):
-
-   - Double border effect using box-shadow inset
-   - Brass corner accents using pseudo-elements as triangular brackets
-   - Featured tier gets brass border and ring
-2. **Arch-Top Image Cards** (blog, features):
-
-   - Image container uses arch-top border-radius
-   - Image has sepia filter with hover reveal
-   - Scale image slightly on card hover (`scale-105`)
-3. **Wax Seal Badges** (featured items):
-
-   - Circular crimson badge positioned at top-right
-   - Radial gradient for dimensional wax appearance
-   - Contains icon (typically star)
-   - Position: `-top-3 absolute right-6`
-
-### Form Inputs
-
-**Text Inputs**:
-
-- Background: `#251E19` (aged oak)
-- Border: `1px solid #4A3F35` (wood grain)
-- Text: `#E8DFD4` (parchment), Crimson Pro font
-- Placeholder: Italic serif, `#9C8B7A` (faded ink)
-- Height: `h-12` (48px)
-- Padding: `px-4 py-2`
-- Radius: `4px` (rounded)
-
-**Focus State**:
-
-- Border: `#C9A962` (brass)
-- Ring: `ring-2 ring-[#C9A962]/30` with offset
-- No outline, rely on ring for accessibility
-
-**Labels**:
-
-- Position: Above input
-- Font: Cinzel, uppercase, small tracking
-- Color: `#9C8B7A` or brass for important fields
-
-### Interactive States
-
-**Hover States**:
-
-- Links: Brass text with expanded letter-spacing (tracking increase from 0.2em to 0.25em)
-- Cards: Brass border tint, shadow lift, corner flourish opacity increase
-- Buttons: Brightness increase or color transformation (secondary transforms to crimson)
-- Images: Sepia filter removal over 700ms with subtle scale (105%)
-- Stats: Number scales to 110%, label changes to brass, background darkens
-- Logo: Subtle scale to 105%
-- FAQ toggles: Rotate 180deg on open with color transformation
-
-**Focus States** (keyboard navigation):
-
-- Ring: `ring-2 ring-[#C9A962]` with `ring-offset-2 ring-offset-[#1C1714]`
-- Must be clearly visible against all backgrounds
-- No outline removal - accessibility critical
-
-**Active/Pressed States**:
-
-- Buttons: Deeper inset shadow
-- Links: Slightly darker brass tone
-- Cards: No special treatment (hover is sufficient)
-
-**Disabled States**:
-
-- Opacity: `0.5`
-- Pointer events: `none`
-- No color change - opacity handles it
-
----
-
-## Layout Principles
-
-### Spacing Rhythm
-
-**Base Grid**: 8px spacing system
-
-- Micro spacing (icon gaps, inline elements): `gap-2` to `gap-4` (8px-16px)
-- Element spacing (card internals): `gap-4` to `gap-8` (16px-32px)
-- Section spacing (between major blocks): `gap-8` to `gap-12` (32px-48px)
-- Vertical section padding: `py-24` to `py-32` (96px-128px)
-
-**Content Width**:
-
-- Standard content: `max-w-6xl` (1152px)
-- Narrow content (blog posts, forms): `max-w-4xl` (896px)
-- Full-width sections: `max-w-7xl` (1280px) or full viewport for backgrounds
-
-**Grid Patterns**:
-
-- Three-column: `grid-cols-1 md:grid-cols-3` (features, pricing, benefits)
-- Two-column: `grid-cols-1 lg:grid-cols-2` (testimonials, hero split)
-- Four-column: `grid-cols-2 md:grid-cols-4` (stats bar)
-
-**Asymmetry & Balance**:
-
-- Hero sections favor 60/40 or 7/5 column splits
-- Text can slightly "bleed" into adjacent columns for dynamic feel
-- Alternate left/right alignment in timeline-style sections
-
-### Section Separators
-
-**Border Separators**:
-
-- Full-width border: `border-y border-[#4A3F35]`
-- Background: Often pair with `bg-[#251E19]/30` or `bg-[#251E19]/50` for subtle panel effect
-- Use between major sections to create rhythm
-
-**Ornate Dividers**:
-
-- Use within sections to separate subsections
-- Width: `w-64` centered or full-width
-- Include decorative glyph at center
-
-**Visual Breathing Room**:
-
-- Allow generous vertical space between sections (96px-128px)
-- Don't pack content tightly - academia values space and contemplation
-
----
-
-## The "Bold Factor" (Non-Genericness)
-
-These are the **mandatory signature elements** that define Academia/Classical. A design is not complete without these:
-
-### 1. **Arch-Topped Images**
-
-Every featured image must use the cathedral arch border-radius (`40% 40% 0 0 / 20% 20% 0 0`). This single element transforms modern web imagery into architectural references of classical libraries and Gothic buildings.
-
-### 2. **Sepia-to-Color Image Transitions**
-
-All images start with sepia filter (0.6) and transition to full color on hover over 700ms. This creates the magical effect of "aged photographs coming to life" when users interact.
-
-### 3. **Roman Numeral Volume System**
-
-Every major section must be prefixed with "Volume I", "Volume II", etc. using Roman numerals. List items and sub-elements use standalone Roman numerals (I, II, III...). Use Cinzel font, uppercase, brass color for all numbering.
-
-### 4. **Drop Cap Introductions**
-
-Opening paragraphs of major sections should feature massive brass drop caps using Cinzel font at `text-7xl`, creating that illuminated manuscript feeling.
-
-### 5. **Corner Flourishes**
-
-Major frames (hero section) must have large brass corner brackets (40px). Cards should have subtle corner flourishes (24px). This frames content like certificates and portraits.
-
-### 6. **Ornate Dividers with Glyphs**
-
-Section breaks use gradient dividers (transparent → wood grain → brass → wood grain → transparent) with a centered decorative Unicode character (✶, ❧, ✤, ❦).
-
-### 7. **Wax Seal Badges**
-
-Featured or highlighted items get circular crimson badges with radial gradients and inset shadows, containing a centered star icon. This mimics traditional wax seals on important documents.
-
-### 8. **Brass Interactive Elements**
-
-ALL interactive elements (buttons, links, focus rings, hover states) must use the brass color (#C9A962) or brass gradient. This is non-negotiable - brass is the interactive color language.
-
-### 9. **Engraved Text Effects**
-
-Buttons and special headings use dual text-shadow (dark below, light above) to create pressed-into-metal engraved appearance.
-
-### 10. **Texture Overlays**
-
-Page must include both subtle paper texture (3% opacity noise) and vignette effect (radial gradient darkening edges). These are fixed overlays that create atmospheric depth.
-
----
-
-## Animation & Motion
-
-**Motion Philosophy**: Dignified, deliberate, and smooth. Nothing should feel snappy, bouncy, or playful. Motion should feel like the weight of leather-bound books, the swing of brass lamps, the turn of old pages.
-
-**Timing Functions**:
-
-- Default: `ease-out` (natural deceleration)
-- Never use: `ease-in-out` (too mechanical), `bounce`, `spring` (too playful)
-
-**Duration Hierarchy**:
-
-- Fast interactions (button press, focus): `150ms`
-- Standard transitions (hover, border changes): `300ms`
-- Deliberate transitions (cards lifting, border color): `500ms`
-- Dramatic reveals (sepia to color, scale): `700ms`
-
-**Transform Patterns**:
-
-- Hover scale: `scale-105` or `scale-[1.02]` (subtle, never dramatic)
-- Hover lift: Increase shadow, don't translate vertically
-- No rotation transforms (except for chevron icons)
-- No slide-in or slide-out animations
-
-**Signature Animation - Brass Shimmer** (optional enhancement):
-Subtle brightness oscillation on brass buttons:
-
-```
-hover: brightness-110
-animation: Gentle pulse between 100% and 110% over 2s
-```
-
-**Respect Motion Preferences**:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
----
-
-## Iconography
-
-**Icon Library**: Use Lucide React or similar minimal icon set
-
-**Styling Rules**:
-
-- Stroke width: `1.5` (thin, elegant lines)
-- Color: Brass (`#C9A962`) for decorative icons
-- Size: `h-4 w-4` to `h-6 w-6` depending on context
-- Containers: Often enclosed in circular or shield-shaped containers with brass border
-
-**Engraved Icon Treatment** (optional):
-
-- Place icons in circular containers: `rounded-full border border-[#C9A962]/30 bg-[#1C1714]`
-- Size: `h-12 w-12` with centered icon `h-5 w-5`
-- Creates "carved medallion" effect
-
-**Icon Usage**:
-
-- Feature icons: Educational symbols (book, scroll, graduation cap, quill)
-- Button icons: Actions (chevrons, external link, check marks)
-- Decorative icons: Stars for ratings, quotes for testimonials
-
----
-
-## Anti-Patterns (What to Avoid)
-
-### Do NOT:
-
-1. **Use sans-serif fonts** anywhere except for extreme edge cases (accessibility overrides)
-2. **Use bright, saturated colors** - everything should feel aged and warm
-3. **Use sharp, geometric shapes** - favor organic curves and traditional architecture
-4. **Overuse decorative elements** - restraint is scholarly; excess is gaudy
-5. **Use modern gradients** (except brass metallic effect) - no vibrant color transitions
-6. **Ignore the arch-top pattern** - flat-top images break the aesthetic
-7. **Skip Roman numerals** - they're essential to the classical academic vibe
-8. **Use pure black (#000000)** - always use warm dark browns
-9. **Use pure white (#FFFFFF)** - always use warm cream tones
-10. **Add playful animations** - no bouncing, no elastic effects, no whimsy
-11. **Forget sepia filters** - images must feel aged by default
-12. **Use thin borders everywhere** - let backgrounds do separation work, borders for emphasis
-13. **Mix cold and warm tones** - this is a warm palette exclusively
-
-### Common Mistakes:
-
-- **Too many corner flourishes** - reserve for hero and cards, not every element
-- **Overusing crimson** - it's for special emphasis only, brass should dominate
-- **Insufficient spacing** - academia needs breathing room for contemplation
-- **Missing texture overlays** - these add essential atmospheric depth
-- **Forgetting focus states** - keyboard navigation must have visible brass rings
-- **Inconsistent font usage** - Cormorant for headings, Crimson for body, Cinzel for labels/display
-
----
-
-## Responsive Strategy
-
-### Mobile (< 768px):
-
-- **Stack all columns vertically** - maintain hierarchy
-- **Touch targets** - Minimum 48px height for interactive elements (FAQ buttons 40px, general links 48px min-height)
-- **Simplify decorative elements** - hide large corner flourishes, keep small ones
-- **Maintain typography** - reduce sizes slightly (text-lg becomes text-base) but keep font choices
-- **Full-width cards** - preserve arch-tops on images
-- **Single-line borders** - simplify double-border effects
-- **Reduce spacing** - py-16 instead of py-24 for sections, reduce internal padding (pl-6 instead of pl-10)
-- **Simplify navigation** - hamburger menu with same serif styling
-- **Form elements** - Stack email input and button vertically, ensure full-width buttons on mobile
-
-### Tablet (768px - 1024px):
-
-- **Two-column grids** where appropriate (features, testimonials)
-- **Partial decorative elements** - show corner flourishes on cards
-- **Maintain most effects** - keep sepia transitions, brass interactions
-- **Flexible spacing** - scale between mobile and desktop values
-
-### Desktop (> 1024px):
-
-- **Full ornate experience** - all decorative elements visible
-- **Three-column grids** - features, pricing, benefits
-- **Maximum visual richness** - large corner flourishes, full texture overlays
-- **Generous spacing** - full py-24 to py-32 section padding
-
-### Responsive Image Strategy:
-
-- Arch-tops work at all sizes - maintain the effect
-- Use `aspect-[3/4]` or `aspect-[4/5]` for portraits, `aspect-[4/3]` for landscapes
-- Always apply sepia filter at all viewport sizes
-
----
-
-## Accessibility Considerations
-
-### Contrast Requirements:
-
-- **Primary text on background**: 8.5:1 (exceeds WCAG AAA)
-- **Secondary text on background**: 4.5:1 minimum (meets WCAG AA)
-- **Brass on dark backgrounds**: 7:1 (excellent)
-- **Dark text on brass buttons**: 8:1 (excellent)
-
-### Focus Indicators:
-
-- **Always visible**: 2px brass ring with 2px offset
-- **High contrast**: Brass (#C9A962) against all backgrounds
-- **Never remove**: Critical for keyboard navigation
-- **Ring offset**: Uses background color for clear separation
-
-### Motion Preferences:
-
-- Respect `prefers-reduced-motion` media query
-- Disable or drastically reduce transition durations
-- Maintain functionality without motion
-
-### Semantic HTML:
-
-- Use proper heading hierarchy (h1 → h2 → h3)
-- Use `<nav>` for navigation, `<main>` for content, `<footer>` for footer
-- Use `<button>` for actions, `<a>` for navigation
-- Use `aria-label` for icon-only buttons
-
-### Screen Reader Considerations:
-
-- Decorative elements (flourishes, dividers) should have `aria-hidden="true"`
-- Images must have descriptive alt text
-- Form inputs must have associated labels
-- Focus order must be logical
-
----
-
-## Implementation Constraints
-
-### Technology Stack:
-
-- **CSS Framework**: Tailwind CSS v4+ with arbitrary value syntax `[#C9A962]`
-- **Fonts**: Google Fonts (Cormorant Garamond, Crimson Pro, Cinzel)
-- **Icons**: Lucide React or similar minimal icon set
-- **Custom CSS**: Required for textures, flourishes, and complex decorative elements
-
-### Custom CSS Requirements:
-
-The following cannot be achieved with Tailwind alone and require custom CSS:
-
-- Paper texture overlay (SVG noise filter)
-- Vignette radial gradient overlay
-- Corner flourishes (pseudo-elements)
-- Ornate dividers with centered glyphs
-- Wax seal badge (complex radial gradient)
-- Drop cap styling (::first-letter pseudo-element)
-- Arch-top border-radius (complex multi-value syntax)
-
-### Performance Considerations:
-
-- Fixed overlays (texture, vignette) use single elements, not per-component
-- Sepia filters are GPU-accelerated transforms
-- Minimize custom fonts to three families
-- Use font-display: swap for Google Fonts
-
-### Browser Support:
-
-- Modern browsers (last 2 versions of Chrome, Firefox, Safari, Edge)
-- CSS Grid and Flexbox required
-- CSS custom properties for theme tokens
-- Border-radius complex syntax for arch-tops
-
----
-
-## Design Token Reference (Quick Copy)
-
-```javascript
-export const academiaTokens = {
-  colors: {
-    background: "#1C1714",
-    backgroundAlt: "#251E19",
-    foreground: "#E8DFD4",
-    muted: "#3D332B",
-    mutedForeground: "#9C8B7A",
-    accent: "#C9A962",
-    accentSecondary: "#8B2635",
-    border: "#4A3F35",
-  },
-  fonts: {
-    heading: "'Cormorant Garamond', serif",
-    body: "'Crimson Pro', serif",
-    display: "'Cinzel', serif",
-  },
-  radius: {
-    default: "4px",
-    arch: "40% 40% 0 0 / 20% 20% 0 0",
-  },
-  transitions: {
-    fast: "150ms",
-    base: "300ms",
-    slow: "500ms",
-    dramatic: "700ms",
-  },
-  spacing: {
-    section: ["py-24", "py-32"],
-    card: ["p-8", "p-12"],
-    element: ["gap-4", "gap-8"],
-  },
-  effects: {
-    sepia: "sepia(0.6) contrast(0.95) brightness(0.9)",
-    brassGradient: "linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)",
-    engraved: "1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(255,255,255,0.1)",
-  },
-};
-```
-
----
-
-## Summary
-
-Academia/Classical is defined by its **material authenticity** (aged paper, dark wood, polished brass), **typographic excellence** (three distinct serifs used purposefully), and **signature architectural elements** (arch-tops, corner flourishes, Roman numerals).
-
-The style succeeds when every element feels like it could exist in a physical 19th-century university library. It fails when it feels like a generic dark theme with serifs tacked on.
-
-The brass/gold accent color is the interactive language. The sepia-to-color transition is the magical moment. The arch-topped images are the architectural signature. Together, these create a cohesive, prestigious, scholarly experience that feels timeless and trustworthy.
-`</design-system>`
+<design-system>
+# Design Style: Academia / Classical
+
+## Design Philosophy
+
+**Core Principles**: Scholarly gravitas meets timeless elegance. This style channels the atmosphere of centuries-old university libraries, Victorian study halls, and Renaissance manuscripts. Every element must feel like it belongs in a prestigious institution - combining **rich material references** (aged parchment, dark mahogany wood, polished brass hardware, crimson leather bindings) with **traditional typographic excellence** and **measured ornamentation**.
+
+**Vibe**: Scholarly, Prestigious, Warm, Timeless, Dignified, Intellectual, Distinguished.
+
+**The Academia Promise**: This isn't a modern dark theme with serif fonts. It's a complete transformation into a physical library environment where every interaction feels like turning pages in a leather-bound tome, where brass fixtures catch the light, and where centuries of knowledge create an atmosphere of gravitas and trust.
+
+---
+
+## Design Token System (The DNA)
+
+### Color System (Library at Night)
+
+**Foundation Colors**:
+
+- **background**: `#1C1714` (Deep Mahogany) - The darkest wood tone, foundation of all layouts
+- **backgroundAlt**: `#251E19` (Aged Oak) - Surface elevation, cards, and panel backgrounds
+- **foreground**: `#E8DFD4` (Antique Parchment) - Primary text, warm cream tone
+- **muted**: `#3D332B` (Worn Leather) - Tertiary backgrounds, disabled states
+- **mutedForeground**: `#9C8B7A` (Faded Ink) - Secondary text, labels, metadata
+- **border**: `#4A3F35` (Wood Grain) - Subtle borders and dividers
+
+**Accent Colors**:
+
+- **accent**: `#C9A962` (Polished Brass) - Primary interactive color, highlights, focus states
+- **accentSecondary**: `#8B2635` (Library Crimson) - Emphasis badges, hover transforms
+- **accentForeground**: `#1C1714` (Dark on Brass) - Text on brass-colored buttons
+
+**Color Usage Rules**:
+
+1. **Contrast Ratios**: Maintain 8.5:1 for parchment on mahogany, minimum 4.5:1 for muted text
+2. **Layering Strategy**: Always layer backgroundAlt on top of background for depth (cards, panels)
+3. **Brass Application**: Use brass for ALL interactive elements (buttons, links, focus rings, icons)
+4. **Crimson Sparingly**: Reserve crimson for special emphasis (featured pricing tier, wax seals, hover transforms on secondary buttons)
+5. **Border Subtlety**: Borders should be visible but never harsh - wood grain color provides gentle separation
+
+**Brass Gradient Formula** (for buttons and metallic elements):
+
+```
+background: linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)
+```
+
+This creates authentic polished brass with highlights and shadows.
+
+### Typography System
+
+**Font Families**:
+
+- **Heading Font**: `"Cormorant Garamond", serif` - High-contrast old-style serif with calligraphic elegance
+- **Body Font**: `"Crimson Pro", serif` - Book-style serif designed for extended reading
+- **Display Font**: `"Cinzel", serif` - Engraved, all-caps display font for labels and special emphasis
+
+**Type Scale & Hierarchy**:
+
+- **Display Headings**: `text-5xl` to `text-7xl` (48px-72px), Cormorant Garamond, `leading-[1.1]`, `tracking-tight`
+- **Section Headings**: `text-4xl` to `text-5xl` (36px-48px), Cormorant Garamond
+- **Subsection Headings**: `text-2xl` to `text-3xl` (24px-30px), Cormorant Garamond
+- **Body Text**: `text-base` to `text-lg` (16px-18px), Crimson Pro, `leading-relaxed` (1.625)
+- **Labels/Overlines**: `text-xs` to `text-[10px]` (10px-12px), Cinzel, `uppercase`, `tracking-[0.2em]` to `tracking-[0.3em]`
+
+**Font Weight Distribution**:
+
+- Headings: Regular/Normal (400-500) - avoid heavy weights, let the serif do the work
+- Body: Regular (400)
+- Labels: Medium (500-600) for Cinzel
+- Emphasis: Italic rather than bold for body text
+
+**Special Typography Patterns**:
+
+1. **Drop Caps**: First letter of introductory paragraphs
+
+   - Font: Cinzel (display font)
+   - Size: `text-7xl` (72px), `float-left`, `mr-4`, `leading-[0.8]`
+   - Color: Brass (`#C9A962`)
+   - Shadow: `2px 2px 4px rgba(0,0,0,0.3)` for engraved depth
+2. **Section Numbering**: Use Roman numerals (I, II, III, IV, V...) with "Volume" prefix for major sections
+
+   - Font: Cinzel, `text-xs`, `uppercase`, `tracking-[0.25em]` to `tracking-[0.3em]`
+   - Color: Brass
+   - Pattern: "Volume I", "Volume II", etc. for major section headers; standalone Roman numerals for lists and sub-items
+   - Placement: Positioned above section headings as overline labels
+3. **Engraved Text Effect** (for buttons and special headings):
+
+   - `text-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(255,255,255,0.1)`
+   - Creates pressed-into-metal appearance
+
+### Radius & Border System
+
+**Border Radius Values**:
+
+- **Default**: `4px` (`rounded`) - Subtle, traditional corners for buttons, cards, inputs
+- **Arch-Top Special**: `border-radius: 40% 40% 0 0 / 20% 20% 0 0` - Cathedral arch tops for images
+- **Full Circle**: For icon containers, badges, profile images
+
+**The Arch-Top Signature**:
+This is a defining visual element. The formula creates an elegant arch reminiscent of cathedral windows or library alcoves:
+
+```css
+.arch-top {
+  border-radius: 40% 40% 0 0 / 20% 20% 0 0;
+}
+```
+
+Apply to: Hero images, blog thumbnails, feature images, decorative containers.
+
+**Border Styling**:
+
+- **Thickness**: `1px` standard, `2px` for decorative frames and focus states
+- **Color**: `#4A3F35` (wood grain) for standard borders, `#C9A962` (brass) for interactive/decorative
+- **Pattern**: Single solid borders, avoid dashed or dotted
+
+### Shadows & Depth
+
+**Shadow Philosophy**: Shadows should feel like physical depth in a dimly-lit library - soft, warm, and realistic.
+
+**Shadow Recipes**:
+
+1. **Card Elevation** (default):
+
+   ```
+   shadow: none (rely on border and background differentiation)
+   hover: 0 8px 24px rgba(0,0,0,0.3)
+   ```
+2. **Engraved/Embossed Effect** (buttons, decorative elements):
+
+   ```
+   inset 0 1px 0 rgba(255,255,255,0.2),
+   inset 0 -1px 0 rgba(0,0,0,0.2),
+   0 2px 8px rgba(0,0,0,0.3)
+
+   hover: Add glow via 0 4px 12px rgba(201,169,98,0.3)
+   ```
+3. **Wax Seal Badge**:
+
+   ```
+   inset 0 2px 4px rgba(255,255,255,0.2),
+   inset 0 -2px 4px rgba(0,0,0,0.3),
+   0 4px 8px rgba(0,0,0,0.4)
+   ```
+4. **Focus Ring**:
+
+   ```
+   ring-2 ring-[#C9A962] ring-offset-2 ring-offset-[#1C1714]
+   ```
+
+### Textures & Atmospheric Effects
+
+**1. Aged Paper Texture Overlay**:
+
+- SVG noise filter with fractal turbulence
+- Opacity: `0.03` (extremely subtle)
+- Position: Fixed overlay covering entire viewport
+- Blend mode: `overlay`
+- Purpose: Adds tactile paper grain without overpowering content
+
+**2. Vignette Effect**:
+
+- Radial gradient from center
+- Formula: `radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(28,23,20,0.4) 100%)`
+- Position: Fixed overlay
+- Purpose: Focuses attention toward center, mimics library lighting
+
+**3. Sepia Image Treatment**:
+
+- Default state: `filter: sepia(0.6) contrast(0.95) brightness(0.9)`
+- Hover state: `filter: sepia(0) contrast(1) brightness(1)`
+- Transition: `duration-700 ease-out`
+- Purpose: Images appear as aged photographs that reveal full color on interaction
+
+**4. Decorative Patterns**:
+
+**Ornate Corner Flourishes** (for major frames and cards):
+
+```css
+/* Top-left and bottom-right brass corners */
+.ornate-frame::before,
+.ornate-frame::after {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border: 2px solid #C9A962;
+}
+
+.ornate-frame::before {
+  top: -1px;
+  left: -1px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.ornate-frame::after {
+  bottom: -1px;
+  right: -1px;
+  border-left: none;
+  border-top: none;
+}
+```
+
+**Ornate Divider** (section separators):
+
+```css
+/* Gradient line with centered decorative glyph */
+.ornate-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, #4A3F35 20%, #C9A962 50%, #4A3F35 80%, transparent 100%);
+}
+
+.ornate-divider::before {
+  content: "✶"; /* or other decorative Unicode character */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #C9A962;
+  font-size: 12px;
+  background: #1C1714;
+  padding: 0 12px;
+}
+```
+
+---
+
+## Section Patterns
+
+### Product Detail Section
+
+This section serves as a formal proclamation or manifesto, positioned after stats to elaborate on the value proposition.
+
+**Structure**:
+
+- Container: Ornate frame with corner flourishes
+- Background: `#251E19/50` on rounded border
+- Header: Centered "Proclamation" label with flanking brass lines
+- Headline: Large serif (4xl-6xl) centered with tight line-height
+- Ornate divider: Full decorative divider with centered glyph
+- Body: Multi-paragraph content with drop cap on first paragraph
+- Spacing: Generous padding (p-8 to p-12), centered max-width (max-w-4xl)
+
+**Typography**:
+
+- Label: Cinzel, uppercase, brass color, wide tracking
+- Headline: Cormorant Garamond, extra large, standard color
+- Body: Text-lg, muted foreground color, relaxed leading
+- First paragraph: Drop cap effect automatically applied
+
+This creates a "certificate of excellence" feeling - formal, centered, and authoritative.
+
+---
+
+## Component Styling Principles
+
+### Buttons
+
+**Visual Treatment**:
+
+- Font: Cinzel (display font)
+- Text: Uppercase with `tracking-[0.15em]`
+- Size: Small text (`text-xs`) with generous padding for dignified presence
+- Effect: Engraved text shadow for pressed-metal appearance
+
+**Primary Button** (brass, main actions):
+
+- Background: Brass gradient (`linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)`)
+- Text: Dark mahogany (`#1C1714`) for maximum contrast on brass
+- Radius: `4px` (rounded)
+- Shadow: Inset highlights and depth shadows (see shadow system)
+- Hover: Increase brightness to 110%, add brass glow shadow
+- Active: Deeper inset shadow for pressed effect
+
+**Secondary Button** (outlined, alternative actions):
+
+- Background: Transparent
+- Border: `2px solid #C9A962` (brass)
+- Text: Brass (`#C9A962`)
+- Hover: Transform to crimson - `border: #8B2635`, `bg: #8B2635`, `text: #E8DFD4`
+- Purpose: Offers elegant alternative that can dramatically transform
+
+**Ghost Button** (minimal, tertiary actions):
+
+- No background or border
+- Text: Brass with hover underline
+- Underline offset: `4px` for breathing room
+- Hover: Brighten to `#D4B872` with underline
+
+**Button Sizes**:
+
+- Default: `h-12 px-8`
+- Small: `h-10 px-6`
+- Large: `h-14 px-10`
+
+### Cards & Containers
+
+**Structure**:
+
+- Background: `#251E19` (aged oak - one layer above page background)
+- Border: `1px solid #4A3F35` (wood grain)
+- Radius: `4px` (rounded)
+- Padding: `p-8` to `p-12` depending on content density
+- Position: Relative (for corner flourishes)
+
+**Corner Flourish Pattern**:
+
+- Apply `.corner-flourish` class
+- Creates subtle brass corner brackets (24px × 24px)
+- Opacity: 0.6 default, 1.0 on hover
+- Purpose: Frames content like a certificate or portrait
+
+**Hover Behavior**:
+
+- Border: Transition to `#C9A962/50` (brass with transparency)
+- Shadow: Add `0 8px 24px rgba(0,0,0,0.3)` for lift effect
+- Duration: `300ms` ease
+
+**Special Card Treatments**:
+
+1. **Certificate/Ledger Style** (pricing cards):
+
+   - Double border effect using box-shadow inset
+   - Brass corner accents using pseudo-elements as triangular brackets
+   - Featured tier gets brass border and ring
+2. **Arch-Top Image Cards** (blog, features):
+
+   - Image container uses arch-top border-radius
+   - Image has sepia filter with hover reveal
+   - Scale image slightly on card hover (`scale-105`)
+3. **Wax Seal Badges** (featured items):
+
+   - Circular crimson badge positioned at top-right
+   - Radial gradient for dimensional wax appearance
+   - Contains icon (typically star)
+   - Position: `-top-3 absolute right-6`
+
+### Form Inputs
+
+**Text Inputs**:
+
+- Background: `#251E19` (aged oak)
+- Border: `1px solid #4A3F35` (wood grain)
+- Text: `#E8DFD4` (parchment), Crimson Pro font
+- Placeholder: Italic serif, `#9C8B7A` (faded ink)
+- Height: `h-12` (48px)
+- Padding: `px-4 py-2`
+- Radius: `4px` (rounded)
+
+**Focus State**:
+
+- Border: `#C9A962` (brass)
+- Ring: `ring-2 ring-[#C9A962]/30` with offset
+- No outline, rely on ring for accessibility
+
+**Labels**:
+
+- Position: Above input
+- Font: Cinzel, uppercase, small tracking
+- Color: `#9C8B7A` or brass for important fields
+
+### Interactive States
+
+**Hover States**:
+
+- Links: Brass text with expanded letter-spacing (tracking increase from 0.2em to 0.25em)
+- Cards: Brass border tint, shadow lift, corner flourish opacity increase
+- Buttons: Brightness increase or color transformation (secondary transforms to crimson)
+- Images: Sepia filter removal over 700ms with subtle scale (105%)
+- Stats: Number scales to 110%, label changes to brass, background darkens
+- Logo: Subtle scale to 105%
+- FAQ toggles: Rotate 180deg on open with color transformation
+
+**Focus States** (keyboard navigation):
+
+- Ring: `ring-2 ring-[#C9A962]` with `ring-offset-2 ring-offset-[#1C1714]`
+- Must be clearly visible against all backgrounds
+- No outline removal - accessibility critical
+
+**Active/Pressed States**:
+
+- Buttons: Deeper inset shadow
+- Links: Slightly darker brass tone
+- Cards: No special treatment (hover is sufficient)
+
+**Disabled States**:
+
+- Opacity: `0.5`
+- Pointer events: `none`
+- No color change - opacity handles it
+
+---
+
+## Layout Principles
+
+### Spacing Rhythm
+
+**Base Grid**: 8px spacing system
+
+- Micro spacing (icon gaps, inline elements): `gap-2` to `gap-4` (8px-16px)
+- Element spacing (card internals): `gap-4` to `gap-8` (16px-32px)
+- Section spacing (between major blocks): `gap-8` to `gap-12` (32px-48px)
+- Vertical section padding: `py-24` to `py-32` (96px-128px)
+
+**Content Width**:
+
+- Standard content: `max-w-6xl` (1152px)
+- Narrow content (blog posts, forms): `max-w-4xl` (896px)
+- Full-width sections: `max-w-7xl` (1280px) or full viewport for backgrounds
+
+**Grid Patterns**:
+
+- Three-column: `grid-cols-1 md:grid-cols-3` (features, pricing, benefits)
+- Two-column: `grid-cols-1 lg:grid-cols-2` (testimonials, hero split)
+- Four-column: `grid-cols-2 md:grid-cols-4` (stats bar)
+
+**Asymmetry & Balance**:
+
+- Hero sections favor 60/40 or 7/5 column splits
+- Text can slightly "bleed" into adjacent columns for dynamic feel
+- Alternate left/right alignment in timeline-style sections
+
+### Section Separators
+
+**Border Separators**:
+
+- Full-width border: `border-y border-[#4A3F35]`
+- Background: Often pair with `bg-[#251E19]/30` or `bg-[#251E19]/50` for subtle panel effect
+- Use between major sections to create rhythm
+
+**Ornate Dividers**:
+
+- Use within sections to separate subsections
+- Width: `w-64` centered or full-width
+- Include decorative glyph at center
+
+**Visual Breathing Room**:
+
+- Allow generous vertical space between sections (96px-128px)
+- Don't pack content tightly - academia values space and contemplation
+
+---
+
+## The "Bold Factor" (Non-Genericness)
+
+These are the **mandatory signature elements** that define Academia/Classical. A design is not complete without these:
+
+### 1. **Arch-Topped Images**
+
+Every featured image must use the cathedral arch border-radius (`40% 40% 0 0 / 20% 20% 0 0`). This single element transforms modern web imagery into architectural references of classical libraries and Gothic buildings.
+
+### 2. **Sepia-to-Color Image Transitions**
+
+All images start with sepia filter (0.6) and transition to full color on hover over 700ms. This creates the magical effect of "aged photographs coming to life" when users interact.
+
+### 3. **Roman Numeral Volume System**
+
+Every major section must be prefixed with "Volume I", "Volume II", etc. using Roman numerals. List items and sub-elements use standalone Roman numerals (I, II, III...). Use Cinzel font, uppercase, brass color for all numbering.
+
+### 4. **Drop Cap Introductions**
+
+Opening paragraphs of major sections should feature massive brass drop caps using Cinzel font at `text-7xl`, creating that illuminated manuscript feeling.
+
+### 5. **Corner Flourishes**
+
+Major frames (hero section) must have large brass corner brackets (40px). Cards should have subtle corner flourishes (24px). This frames content like certificates and portraits.
+
+### 6. **Ornate Dividers with Glyphs**
+
+Section breaks use gradient dividers (transparent → wood grain → brass → wood grain → transparent) with a centered decorative Unicode character (✶, ❧, ✤, ❦).
+
+### 7. **Wax Seal Badges**
+
+Featured or highlighted items get circular crimson badges with radial gradients and inset shadows, containing a centered star icon. This mimics traditional wax seals on important documents.
+
+### 8. **Brass Interactive Elements**
+
+ALL interactive elements (buttons, links, focus rings, hover states) must use the brass color (#C9A962) or brass gradient. This is non-negotiable - brass is the interactive color language.
+
+### 9. **Engraved Text Effects**
+
+Buttons and special headings use dual text-shadow (dark below, light above) to create pressed-into-metal engraved appearance.
+
+### 10. **Texture Overlays**
+
+Page must include both subtle paper texture (3% opacity noise) and vignette effect (radial gradient darkening edges). These are fixed overlays that create atmospheric depth.
+
+---
+
+## Animation & Motion
+
+**Motion Philosophy**: Dignified, deliberate, and smooth. Nothing should feel snappy, bouncy, or playful. Motion should feel like the weight of leather-bound books, the swing of brass lamps, the turn of old pages.
+
+**Timing Functions**:
+
+- Default: `ease-out` (natural deceleration)
+- Never use: `ease-in-out` (too mechanical), `bounce`, `spring` (too playful)
+
+**Duration Hierarchy**:
+
+- Fast interactions (button press, focus): `150ms`
+- Standard transitions (hover, border changes): `300ms`
+- Deliberate transitions (cards lifting, border color): `500ms`
+- Dramatic reveals (sepia to color, scale): `700ms`
+
+**Transform Patterns**:
+
+- Hover scale: `scale-105` or `scale-[1.02]` (subtle, never dramatic)
+- Hover lift: Increase shadow, don't translate vertically
+- No rotation transforms (except for chevron icons)
+- No slide-in or slide-out animations
+
+**Signature Animation - Brass Shimmer** (optional enhancement):
+Subtle brightness oscillation on brass buttons:
+
+```
+hover: brightness-110
+animation: Gentle pulse between 100% and 110% over 2s
+```
+
+**Respect Motion Preferences**:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Iconography
+
+**Icon Library**: Use Lucide React or similar minimal icon set
+
+**Styling Rules**:
+
+- Stroke width: `1.5` (thin, elegant lines)
+- Color: Brass (`#C9A962`) for decorative icons
+- Size: `h-4 w-4` to `h-6 w-6` depending on context
+- Containers: Often enclosed in circular or shield-shaped containers with brass border
+
+**Engraved Icon Treatment** (optional):
+
+- Place icons in circular containers: `rounded-full border border-[#C9A962]/30 bg-[#1C1714]`
+- Size: `h-12 w-12` with centered icon `h-5 w-5`
+- Creates "carved medallion" effect
+
+**Icon Usage**:
+
+- Feature icons: Educational symbols (book, scroll, graduation cap, quill)
+- Button icons: Actions (chevrons, external link, check marks)
+- Decorative icons: Stars for ratings, quotes for testimonials
+
+---
+
+## Anti-Patterns (What to Avoid)
+
+### Do NOT:
+
+1. **Use sans-serif fonts** anywhere except for extreme edge cases (accessibility overrides)
+2. **Use bright, saturated colors** - everything should feel aged and warm
+3. **Use sharp, geometric shapes** - favor organic curves and traditional architecture
+4. **Overuse decorative elements** - restraint is scholarly; excess is gaudy
+5. **Use modern gradients** (except brass metallic effect) - no vibrant color transitions
+6. **Ignore the arch-top pattern** - flat-top images break the aesthetic
+7. **Skip Roman numerals** - they're essential to the classical academic vibe
+8. **Use pure black (#000000)** - always use warm dark browns
+9. **Use pure white (#FFFFFF)** - always use warm cream tones
+10. **Add playful animations** - no bouncing, no elastic effects, no whimsy
+11. **Forget sepia filters** - images must feel aged by default
+12. **Use thin borders everywhere** - let backgrounds do separation work, borders for emphasis
+13. **Mix cold and warm tones** - this is a warm palette exclusively
+
+### Common Mistakes:
+
+- **Too many corner flourishes** - reserve for hero and cards, not every element
+- **Overusing crimson** - it's for special emphasis only, brass should dominate
+- **Insufficient spacing** - academia needs breathing room for contemplation
+- **Missing texture overlays** - these add essential atmospheric depth
+- **Forgetting focus states** - keyboard navigation must have visible brass rings
+- **Inconsistent font usage** - Cormorant for headings, Crimson for body, Cinzel for labels/display
+
+---
+
+## Responsive Strategy
+
+### Mobile (< 768px):
+
+- **Stack all columns vertically** - maintain hierarchy
+- **Touch targets** - Minimum 48px height for interactive elements (FAQ buttons 40px, general links 48px min-height)
+- **Simplify decorative elements** - hide large corner flourishes, keep small ones
+- **Maintain typography** - reduce sizes slightly (text-lg becomes text-base) but keep font choices
+- **Full-width cards** - preserve arch-tops on images
+- **Single-line borders** - simplify double-border effects
+- **Reduce spacing** - py-16 instead of py-24 for sections, reduce internal padding (pl-6 instead of pl-10)
+- **Simplify navigation** - hamburger menu with same serif styling
+- **Form elements** - Stack email input and button vertically, ensure full-width buttons on mobile
+
+### Tablet (768px - 1024px):
+
+- **Two-column grids** where appropriate (features, testimonials)
+- **Partial decorative elements** - show corner flourishes on cards
+- **Maintain most effects** - keep sepia transitions, brass interactions
+- **Flexible spacing** - scale between mobile and desktop values
+
+### Desktop (> 1024px):
+
+- **Full ornate experience** - all decorative elements visible
+- **Three-column grids** - features, pricing, benefits
+- **Maximum visual richness** - large corner flourishes, full texture overlays
+- **Generous spacing** - full py-24 to py-32 section padding
+
+### Responsive Image Strategy:
+
+- Arch-tops work at all sizes - maintain the effect
+- Use `aspect-[3/4]` or `aspect-[4/5]` for portraits, `aspect-[4/3]` for landscapes
+- Always apply sepia filter at all viewport sizes
+
+---
+
+## Accessibility Considerations
+
+### Contrast Requirements:
+
+- **Primary text on background**: 8.5:1 (exceeds WCAG AAA)
+- **Secondary text on background**: 4.5:1 minimum (meets WCAG AA)
+- **Brass on dark backgrounds**: 7:1 (excellent)
+- **Dark text on brass buttons**: 8:1 (excellent)
+
+### Focus Indicators:
+
+- **Always visible**: 2px brass ring with 2px offset
+- **High contrast**: Brass (#C9A962) against all backgrounds
+- **Never remove**: Critical for keyboard navigation
+- **Ring offset**: Uses background color for clear separation
+
+### Motion Preferences:
+
+- Respect `prefers-reduced-motion` media query
+- Disable or drastically reduce transition durations
+- Maintain functionality without motion
+
+### Semantic HTML:
+
+- Use proper heading hierarchy (h1 → h2 → h3)
+- Use `<nav>` for navigation, `<main>` for content, `<footer>` for footer
+- Use `<button>` for actions, `<a>` for navigation
+- Use `aria-label` for icon-only buttons
+
+### Screen Reader Considerations:
+
+- Decorative elements (flourishes, dividers) should have `aria-hidden="true"`
+- Images must have descriptive alt text
+- Form inputs must have associated labels
+- Focus order must be logical
+
+---
+
+## Implementation Constraints
+
+### Technology Stack:
+
+- **CSS Framework**: Tailwind CSS v4+ with arbitrary value syntax `[#C9A962]`
+- **Fonts**: Google Fonts (Cormorant Garamond, Crimson Pro, Cinzel)
+- **Icons**: Lucide React or similar minimal icon set
+- **Custom CSS**: Required for textures, flourishes, and complex decorative elements
+
+### Custom CSS Requirements:
+
+The following cannot be achieved with Tailwind alone and require custom CSS:
+
+- Paper texture overlay (SVG noise filter)
+- Vignette radial gradient overlay
+- Corner flourishes (pseudo-elements)
+- Ornate dividers with centered glyphs
+- Wax seal badge (complex radial gradient)
+- Drop cap styling (::first-letter pseudo-element)
+- Arch-top border-radius (complex multi-value syntax)
+
+### Performance Considerations:
+
+- Fixed overlays (texture, vignette) use single elements, not per-component
+- Sepia filters are GPU-accelerated transforms
+- Minimize custom fonts to three families
+- Use font-display: swap for Google Fonts
+
+### Browser Support:
+
+- Modern browsers (last 2 versions of Chrome, Firefox, Safari, Edge)
+- CSS Grid and Flexbox required
+- CSS custom properties for theme tokens
+- Border-radius complex syntax for arch-tops
+
+---
+
+## Design Token Reference (Quick Copy)
+
+```javascript
+export const academiaTokens = {
+  colors: {
+    background: "#1C1714",
+    backgroundAlt: "#251E19",
+    foreground: "#E8DFD4",
+    muted: "#3D332B",
+    mutedForeground: "#9C8B7A",
+    accent: "#C9A962",
+    accentSecondary: "#8B2635",
+    border: "#4A3F35",
+  },
+  fonts: {
+    heading: "'Cormorant Garamond', serif",
+    body: "'Crimson Pro', serif",
+    display: "'Cinzel', serif",
+  },
+  radius: {
+    default: "4px",
+    arch: "40% 40% 0 0 / 20% 20% 0 0",
+  },
+  transitions: {
+    fast: "150ms",
+    base: "300ms",
+    slow: "500ms",
+    dramatic: "700ms",
+  },
+  spacing: {
+    section: ["py-24", "py-32"],
+    card: ["p-8", "p-12"],
+    element: ["gap-4", "gap-8"],
+  },
+  effects: {
+    sepia: "sepia(0.6) contrast(0.95) brightness(0.9)",
+    brassGradient: "linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%)",
+    engraved: "1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(255,255,255,0.1)",
+  },
+};
+```
+
+---
+
+## Summary
+
+Academia/Classical is defined by its **material authenticity** (aged paper, dark wood, polished brass), **typographic excellence** (three distinct serifs used purposefully), and **signature architectural elements** (arch-tops, corner flourishes, Roman numerals).
+
+The style succeeds when every element feels like it could exist in a physical 19th-century university library. It fails when it feels like a generic dark theme with serifs tacked on.
+
+The brass/gold accent color is the interactive language. The sepia-to-color transition is the magical moment. The arch-topped images are the architectural signature. Together, these create a cohesive, prestigious, scholarly experience that feels timeless and trustworthy.
+`</design-system>`