/* =========================================
   dilemma.dev — Art Deco Bifurcated Grid
   ========================================= */

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --burnt-amber: #c4873b;
    --char-black: #0d0b08;
    --scorched-earth: #1a1510;
    --aged-parchment: #e8dcc8;
    --gilded-cream: #f5e8c8;
    --umber-shadow: #2a2318;
    --oxidized-copper: #8b6914;
    --ember-red: #a34524;
    --right-bg: #110e09;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--char-black);
    color: var(--aged-parchment);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* Subtle ziggurat background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 10 L40 20 L35 20 L42 30 L18 30 L25 20 L20 20 Z' fill='none' stroke='%231a1510' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.03;
}

/* === Fault Line === */
.fault-line {
    position: fixed;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100vh;
    background-color: var(--burnt-amber);
    opacity: 0.4;
    z-index: 100;
    pointer-events: none;
    transform: translateX(-0.5px);
}

/* === Navigation === */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--char-black);
    z-index: 200;
    display: flex;
    align-items: center;
}

.nav-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: 'Poiret One', sans-serif;
    font-size: 16px;
    color: var(--gilded-cream);
    text-decoration: none;
    letter-spacing: 0.08em;
}

.accent-dot {
    color: var(--burnt-amber);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aged-parchment);
    text-decoration: none;
    font-variant: small-caps;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--burnt-amber);
}

/* === Hero === */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 2rem 4rem;
    position: relative;
    z-index: 1;
}

.hero-inner {
    max-width: 700px;
}

.hero-scale {
    width: 280px;
    height: 210px;
    margin: 0 auto 3rem;
    display: block;
}

.scale-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.scale-path.animate {
    animation: drawPath 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.scale-left.animate {
    animation-delay: 0.4s;
}

.scale-right.animate {
    animation-delay: 1.0s;
}

.scale-crossbar.animate {
    animation-delay: 0s;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

.hero-title {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilded-cream);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    color: var(--aged-parchment);
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* === Deco Dividers === */
.deco-divider {
    position: relative;
    z-index: 1;
    height: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.deco-divider svg {
    width: 100%;
    height: 60px;
}

/* === Sections === */
.section {
    position: relative;
    z-index: 1;
    padding: 5rem 0;
}

.section-title {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilded-cream);
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    text-align: center;
    font-style: italic;
    color: var(--oxidized-copper);
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
}

/* === Grid === */
.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Left tiles: columns 1-3 */
.tile-left.tile-span-2 { grid-column: 1 / span 2; }
.tile-left.tile-span-3 { grid-column: 1 / span 3; }

/* Right tiles: columns 4-6 */
.tile-right.tile-span-2 { grid-column: 5 / span 2; }
.tile-right.tile-span-3 { grid-column: 4 / span 3; }

/* Near-fault right tiles start at col 4 */
.tile-right.tile-near-fault.tile-span-2 { grid-column: 4 / span 2; }

/* Near-fault left tiles end at col 3 */
.tile-left.tile-near-fault.tile-span-2 { grid-column: 2 / span 2; }

/* === Tiles === */
.tile {
    border: 1px solid var(--umber-shadow);
    padding: 2rem;
    background: var(--char-black);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease;
}

.tile[data-side="right"] {
    background: var(--right-bg);
}

.tile:hover {
    border-color: var(--burnt-amber);
}

.tile-label {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burnt-amber);
    display: block;
    margin-bottom: 0.75rem;
}

.tile-date {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--oxidized-copper);
    display: block;
    margin-bottom: 0.5rem;
}

.tile-heading {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gilded-cream);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.tile-text {
    color: var(--aged-parchment);
    line-height: 1.72;
}

/* Tile watermark - geometricized fern */
.tile-watermark {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 80px;
    height: 80px;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%231a1510' stroke-width='1'%3E%3Cpath d='M40 75 L40 15'/%3E%3Cpath d='M40 65 L28 55 M40 55 L25 42 M40 45 L26 30 M40 35 L30 20 M40 25 L34 14'/%3E%3Cpath d='M40 65 L52 55 M40 55 L55 42 M40 45 L54 30 M40 35 L50 20 M40 25 L46 14'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* === Shake Animation === */
@keyframes dilemma-shake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: dilemma-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* === Resolution Section === */
.section-resolution {
    text-align: center;
    padding: 6rem 2rem;
}

.resolution-content {
    max-width: 650px;
    margin: 0 auto;
}

.resolution-text {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ember-red);
    margin-bottom: 2rem;
}

.resolution-body {
    color: var(--aged-parchment);
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.05rem;
}

.resolution-closing {
    font-family: 'Poiret One', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gilded-cream);
    margin-top: 3rem;
}

/* === Footer === */
.site-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--umber-shadow);
    padding: 4rem 2rem;
    text-align: center;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.footer-frond {
    position: absolute;
    left: 0;
    top: -2rem;
    width: 60px;
    height: 200px;
    opacity: 0.6;
}

.footer-frond svg {
    width: 100%;
    height: 100%;
}

.footer-text {
    font-family: 'Poiret One', sans-serif;
    font-size: 1.5rem;
    color: var(--gilded-cream);
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.footer-meta {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--oxidized-copper);
}

/* === Fade-in animation === */
.tile {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease;
}

.tile.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Responsive === */
@media (max-width: 768px) {
    .fault-line {
        display: none;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .tile-left.tile-span-2,
    .tile-left.tile-span-3,
    .tile-right.tile-span-2,
    .tile-right.tile-span-3,
    .tile-right.tile-near-fault.tile-span-2,
    .tile-left.tile-near-fault.tile-span-2 {
        grid-column: auto;
    }

    .nav-links {
        gap: 1rem;
    }

    .hero-scale {
        width: 200px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .nav-links a {
        font-size: 9px;
    }
}