/* ===========================================
   BASE STYLES
   Element selectors only - no classes
   Dependencies: tokens.css, reset.css
   Theme: ARCHITECTURAL TRUTH
   =========================================== */

/* ===================
   FONT IMPORTS
   =================== */

/* Font loading with display=swap for performance */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* ===================
   BODY - HONED LIMESTONE FOUNDATION
   =================== */

body {
    background-color: var(--bone-base);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: var(--line-height-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Ensure crisp text against texture */
    text-rendering: optimizeLegibility;
}

/* 
   Premium grain texture overlay 
   Creates "thick paper" / "honed limestone" feel
   Subtler than digital noise - more like expensive paper stock
*/
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--texture-noise);
    opacity: 0.025;
    /* Very subtle - should feel tactile, not gritty */
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
    /* Better texture integration */
}

/* ===================
   TYPOGRAPHY - THE "GLASS" (Crystal Clear)
   Despite rough textures, text must be razor-sharp
   =================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--space-md);
    /* Subtle lift off textured background */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    /* Breathing room against texture */
    letter-spacing: var(--letter-spacing-breathe);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: var(--letter-spacing-tighter);
    line-height: var(--line-height-tight);
    font-weight: 600;
    /* Slightly bolder for presence */
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    font-weight: 500;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin-bottom: var(--space-md);
    color: var(--ink-soft);
    line-height: var(--line-height-relaxed);
    max-width: 65ch;
}

/* Paragraph-to-paragraph spacing */
p+p {
    margin-top: var(--space-md);
    /* 16px between consecutive paragraphs */
}

/* ===================
   LINKS
   =================== */

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-hover);
}

a:hover {
    color: var(--accent-clay);
}

a:focus {
    outline: 2px solid var(--accent-clay);
    outline-offset: 2px;
}

a:focus-visible {
    outline: 2px solid var(--accent-clay);
    outline-offset: 2px;
}

/* ===================
   LISTS
   =================== */

ul,
ol {
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: var(--space-sm);
}

/* ===================
   IMAGES
   =================== */

img {
    max-width: 100%;
    height: auto;
}

/* ===================
   BLOCKQUOTE
   =================== */

blockquote {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--ink-soft);
    border-left: 4px solid var(--accent-clay);
    padding-left: var(--space-lg);
    margin: var(--space-xl) 0;
}

/* ===================
   CODE
   =================== */

code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--text-sm);
    background-color: var(--bone-surface);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-xs);
}

/* ===================
   HORIZONTAL RULE
   =================== */

hr {
    border: none;
    border-top: var(--border-subtle);
    margin: var(--space-xl) 0;
}

/* ===================
   SELECTION
   =================== */

::selection {
    background-color: var(--accent-clay);
    color: white;
}

/* ===================
   CUSTOM SCROLLBAR
   Editorial polish - subtle, refined
   =================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bone-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--travertine);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--stone-warm);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--travertine) var(--bone-surface);
}

/* ===================
   HERO TYPOGRAPHY
   =================== */

.hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
    max-width: 12ch;
    margin-inline: auto;
}

/* ===================
   WORDMARK / LOGO TREATMENT
   Subtle letterspacing on hover
   =================== */

.site-header__wordmark,
.footer__wordmark {
    transition: letter-spacing 0.3s ease, color 0.2s ease;
}

.site-header__wordmark:hover,
.footer__wordmark:hover {
    letter-spacing: 0.02em;
}

/* ===================
   CHOREOGRAPHED ENTRANCE ANIMATIONS
   "The Settled Arrival" — deliberate, heavy, never jarring
   =================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Staggered reveal classes */
.reveal-0 {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.reveal-1 {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
    opacity: 0;
}

.reveal-2 {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
    opacity: 0;
}

.reveal-3 {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
    opacity: 0;
}

.reveal-img {
    animation: fadeScale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
    opacity: 0;
}

/* Prevent layout jitter - reserve space before content loads */
.reveal-container {
    min-height: 400px;
    /* Adjust based on content */
}

.reveal-container--carousel {
    min-height: 500px;
    /* Reserve space for carousel */
}