/* ============================================================
   underdark.science — Art Deco Masonry Specimen Cabinet
   Colors: #0A0806, #14100C, #1E1508, #C9A84C, #F0E6D0, #D4C9B8, #7A4E2D, #A07828
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    --void-black:    #0A0806;
    --obsidian:      #14100C;
    --dark-amber:    #1E1508;
    --specimen-gold: #C9A84C;
    --aged-ivory:    #F0E6D0;
    --pale-bone:     #D4C9B8;
    --burnished-copper: #7A4E2D;
    --deep-gold:     #A07828;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Space Grotesk', system-ui, sans-serif;
    --font-label:   'Oxanium', monospace;

    --grid-gap: 16px;
    --unit: 140px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: var(--void-black);
    color: var(--pale-bone);
    font-family: var(--font-body);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Navigation ---------- */
#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10, 8, 6, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(160, 120, 40, 0.25);
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--specimen-gold);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--pale-bone);
    text-transform: uppercase;
    transition: color 300ms ease;
}

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

.nav-bullet {
    color: var(--deep-gold);
    font-size: 8px;
    opacity: 0.6;
}

/* ---------- Hero ---------- */
#hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--void-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    clip-path: polygon(15% 0%, 85% 0%, 100% 8%, 100% 100%, 0% 100%, 0% 8%);
}

.hero-sunburst {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(201, 168, 76, 0.04) 7.5deg,
        transparent 15deg,
        transparent 22.5deg,
        rgba(201, 168, 76, 0.04) 30deg,
        transparent 37.5deg,
        transparent 45deg,
        rgba(201, 168, 76, 0.04) 52.5deg,
        transparent 60deg,
        transparent 67.5deg,
        rgba(201, 168, 76, 0.04) 75deg,
        transparent 82.5deg,
        transparent 90deg,
        rgba(201, 168, 76, 0.04) 97.5deg,
        transparent 105deg,
        transparent 112.5deg,
        rgba(201, 168, 76, 0.04) 120deg,
        transparent 127.5deg,
        transparent 135deg,
        rgba(201, 168, 76, 0.04) 142.5deg,
        transparent 150deg,
        transparent 157.5deg,
        rgba(201, 168, 76, 0.04) 165deg,
        transparent 172.5deg,
        transparent 180deg,
        rgba(201, 168, 76, 0.04) 187.5deg,
        transparent 195deg,
        transparent 202.5deg,
        rgba(201, 168, 76, 0.04) 210deg,
        transparent 217.5deg,
        transparent 225deg,
        rgba(201, 168, 76, 0.04) 232.5deg,
        transparent 240deg,
        transparent 247.5deg,
        rgba(201, 168, 76, 0.04) 255deg,
        transparent 262.5deg,
        transparent 270deg,
        rgba(201, 168, 76, 0.04) 277.5deg,
        transparent 285deg,
        transparent 292.5deg,
        rgba(201, 168, 76, 0.04) 300deg,
        transparent 307.5deg,
        transparent 315deg,
        rgba(201, 168, 76, 0.04) 322.5deg,
        transparent 330deg,
        transparent 337.5deg,
        rgba(201, 168, 76, 0.04) 345deg,
        transparent 352.5deg,
        transparent 360deg
    );
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 60px;
    max-width: 900px;
}

.hero-taxonomy {
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--deep-gold);
    text-transform: uppercase;
    margin-bottom: 32px;
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 140px);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--specimen-gold);
    margin-bottom: 40px;
}

.hero-subhead {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--aged-ivory);
    margin-bottom: 32px;
}

.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.ornament-line {
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--deep-gold), transparent);
}

.ornament-diamond {
    color: var(--deep-gold);
    font-size: 12px;
}

.hero-descriptor {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--pale-bone);
    max-width: 560px;
    margin: 0 auto;
    opacity: 0.85;
}

.hero-arch-overlay {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(160, 120, 40, 0.15);
    pointer-events: none;
    z-index: 1;
}

.hero-arch-overlay::before {
    content: '';
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(160, 120, 40, 0.08);
}

/* ---------- Masonry Grid ---------- */
#masonry {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--unit);
    gap: var(--grid-gap);
}

/* ---------- Tile Base ---------- */
.tile {
    position: relative;
    background: var(--dark-amber);
    border: 1px solid rgba(160, 120, 40, 0.3);
    overflow: hidden;
    cursor: pointer;
    padding: 28px;
    transition: border-color 400ms ease, box-shadow 400ms ease;
}

/* Inner rule ornament */
.tile::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(160, 120, 40, 0.18);
    pointer-events: none;
    transition: border-color 400ms ease;
}

/* Corner chevrons — top left */
.tile::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--deep-gold);
    border-left: 2px solid var(--deep-gold);
    pointer-events: none;
    z-index: 3;
    transition: transform 300ms ease;
}

.tile:hover {
    border-color: rgba(201, 168, 76, 0.5);
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.06), inset 0 0 60px rgba(201, 168, 76, 0.02);
}

.tile:hover::after {
    border-color: rgba(201, 168, 76, 0.32);
}

.tile:hover::before {
    transform: translate(-4px, -4px);
}

/* Corner chevron bottom-right via tile-rule */
.tile-rule {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-bottom: 2px solid var(--deep-gold);
    border-right: 2px solid var(--deep-gold);
    pointer-events: none;
    z-index: 3;
    transition: transform 300ms ease;
}

.tile:hover .tile-rule {
    transform: translate(4px, 4px);
}

/* Gold bottom-border reveal on hover */
.tile::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(160, 120, 40, 0.18);
    pointer-events: none;
    transition: border-color 400ms ease;
}

/* ---------- Height Tiers ---------- */
.tile--1u {
    grid-row: span 2;    /* 2 × 140px = 280px */
}

.tile--2u {
    grid-row: span 4;    /* 4 × 140px = 560px ≈ 580px with gap */
}

.tile--3u {
    grid-row: span 6;    /* 6 × 140px = 840px ≈ 880px with gap */
}

/* ---------- Tile Typography ---------- */
.tile-taxonomy {
    display: block;
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep-gold);
    margin-bottom: 12px;
}

.tile-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--aged-ivory);
    margin-bottom: 16px;
}

.tile--3u .tile-title {
    font-size: 38px;
    margin-bottom: 20px;
}

.tile-body {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--pale-bone);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile--3u .tile-body,
.tile--2u .tile-body {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* ---------- Specimen Float SVG ---------- */
.specimen-float {
    position: absolute;
    right: -20px;
    top: -30px;
    width: 120px;
    height: 160px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
    transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tile:hover .specimen-float {
    transform: translateY(-8px);
    opacity: 0.32;
}

/* ---------- Sunburst Halo (large tiles) ---------- */
.sunburst-halo {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 70% 30%,
        transparent 0deg,
        rgba(201, 168, 76, 0.035) 7.5deg,
        transparent 15deg,
        transparent 22.5deg,
        rgba(201, 168, 76, 0.035) 30deg,
        transparent 37.5deg,
        transparent 45deg,
        rgba(201, 168, 76, 0.035) 52.5deg,
        transparent 60deg,
        transparent 67.5deg,
        rgba(201, 168, 76, 0.035) 75deg,
        transparent 82.5deg,
        transparent 90deg,
        rgba(201, 168, 76, 0.035) 97.5deg,
        transparent 105deg,
        transparent 112.5deg,
        rgba(201, 168, 76, 0.035) 120deg,
        transparent 127.5deg,
        transparent 135deg,
        rgba(201, 168, 76, 0.035) 142.5deg,
        transparent 150deg,
        transparent 157.5deg,
        rgba(201, 168, 76, 0.035) 165deg,
        transparent 172.5deg,
        transparent 180deg,
        rgba(201, 168, 76, 0.035) 187.5deg,
        transparent 195deg,
        transparent 202.5deg,
        rgba(201, 168, 76, 0.035) 210deg,
        transparent 217.5deg,
        transparent 225deg,
        rgba(201, 168, 76, 0.035) 232.5deg,
        transparent 240deg,
        transparent 247.5deg,
        rgba(201, 168, 76, 0.035) 255deg,
        transparent 262.5deg,
        transparent 270deg,
        rgba(201, 168, 76, 0.035) 277.5deg,
        transparent 285deg,
        transparent 292.5deg,
        rgba(201, 168, 76, 0.035) 300deg,
        transparent 307.5deg,
        transparent 315deg,
        rgba(201, 168, 76, 0.035) 322.5deg,
        transparent 330deg,
        transparent 337.5deg,
        rgba(201, 168, 76, 0.035) 345deg,
        transparent 352.5deg,
        transparent 360deg
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

/* ---------- Tile Entrance Animation ---------- */
.tile {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0ms, transform 0ms;
}

.tile.tile--visible {
    animation: tileEnter 500ms ease forwards;
    animation-delay: calc(var(--col-index, 0) * 80ms + var(--row-index, 0) * 30ms);
}

@keyframes tileEnter {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Footer ---------- */
#site-footer {
    background: var(--void-black);
    border-top: 1px solid rgba(160, 120, 40, 0.25);
    padding: 60px 40px 80px;
}

.footer-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 48px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.footer-line {
    display: block;
    flex: 1;
    max-width: 400px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--deep-gold), transparent);
}

.footer-diamond {
    color: var(--specimen-gold);
    font-size: 14px;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--specimen-gold);
    margin-bottom: 12px;
}

.footer-tagline {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    color: var(--pale-bone);
    opacity: 0.7;
    margin-bottom: 32px;
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.footer-nav a {
    font-family: var(--font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pale-bone);
    transition: color 300ms ease;
}

.footer-nav a:hover {
    color: var(--specimen-gold);
}

.footer-bullet {
    color: var(--deep-gold);
    font-size: 7px;
    opacity: 0.5;
}

.footer-copy {
    font-family: var(--font-label);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pale-bone);
    opacity: 0.35;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    #masonry {
        grid-template-columns: repeat(2, 1fr);
        padding: 60px 24px;
    }

    .tile--3u {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    #masonry {
        grid-template-columns: 1fr;
        padding: 40px 16px;
    }

    .tile--3u,
    .tile--2u,
    .tile--1u {
        grid-column: span 1;
        grid-row: span 2;
    }

    .hero-headline {
        font-size: clamp(56px, 18vw, 80px);
    }

    .nav-links {
        display: none;
    }
}

/* ---------- Scrollbar Styling ---------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--void-black);
}

::-webkit-scrollbar-thumb {
    background: var(--deep-gold);
    opacity: 0.5;
}