/* ============================================================
   continua.club -- Styles
   Sepia-nostalgic palette, modular-blocks layout,
   oversized-display typography, sharp-angles motif
   ============================================================ */

/* --- CUSTOM PROPERTIES --- */
:root {
    --parchment: #F5ECD7;
    --dark-mahogany: #2B1F14;
    --dark-umber: #3D2E1A;
    --faded-bronze: #8B7355;
    --oxidized-bronze: #5C4A32;
    --burnt-sienna: #C2703E;
    --warm-taupe: #A0896C;
    --cream-highlight: #EDE3C9;
    --tea-stain: #D4C4A8;
    --warm-ivory: #D4C4A8;
}

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

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

body {
    background: var(--parchment);
    color: var(--dark-umber);
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
}

/* --- FULL-SCREEN INTRO --- */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--dark-mahogany);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

#intro-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#intro-screen.hidden {
    display: none;
}

#intro-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#intro-svg line {
    stroke-dasharray: 710;
    stroke-dashoffset: 710;
}

#line-tl {
    animation: draw-line 800ms linear 600ms forwards;
}

#line-br {
    animation: draw-line 800ms linear 800ms forwards;
}

@keyframes draw-line {
    to { stroke-dashoffset: 0; }
}

#intro-content {
    position: relative;
    z-index: 1;
    text-align: center;
    opacity: 0;
    animation: fade-in 600ms ease 1400ms forwards;
}

#intro-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 10vw;
    font-weight: 400;
    color: var(--parchment);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 0.88;
}

#intro-subtitle {
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
    color: var(--warm-taupe);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 24px;
    opacity: 0;
    animation: fade-in 600ms ease 1800ms forwards;
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* --- NAVIGATION BAR --- */
#main-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 48px;
    background: var(--dark-mahogany);
    border-bottom: 2px solid var(--faded-bronze);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.nav-domain {
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--tea-stain);
    text-transform: lowercase;
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-link {
    font-family: 'Inconsolata', monospace;
    font-size: 13px;
    font-weight: 400;
    color: var(--warm-taupe);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: color 200ms ease;
}

.nav-link:hover {
    color: var(--burnt-sienna);
}

/* --- MAIN CONTENT --- */
#content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- STRATUM (horizontal content band) --- */
.stratum {
    padding: 80px 0;
    position: relative;
}

.stratum--dark {
    background: var(--dark-mahogany);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 24px);
    padding-right: calc(50vw - 50% + 24px);
}

/* --- STRATUM DIVIDER (skewed parallelogram bar) --- */
.stratum-divider {
    margin-bottom: 48px;
    opacity: 0;
    transition: opacity 400ms ease;
}

.stratum.in-view .stratum-divider {
    opacity: 1;
}

.divider-bar {
    width: 100%;
    height: 6px;
    background: var(--oxidized-bronze);
    transform: skewX(-8deg);
}

.divider-bar--dark {
    background: var(--faded-bronze);
}

/* --- GRID --- */
.stratum-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.stratum-grid--secondary {
    margin-top: 16px;
}

/* --- MODULES --- */
.module {
    position: relative;
    background: var(--parchment);
    border: 2px solid var(--oxidized-bronze);
    padding: 24px;
    /* Hard flat shadow offset at 45 degrees */
    box-shadow: 4px 4px 0 0 var(--dark-umber);
    transition: box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.module:hover {
    box-shadow: -4px 4px 0 0 var(--dark-umber);
    border-color: var(--burnt-sienna);
}

/* Dark module variant */
.module--dark {
    background: var(--dark-umber);
    border-color: var(--faded-bronze);
    box-shadow: 4px 4px 0 0 #1a1209;
}

.module--dark:hover {
    box-shadow: -4px 4px 0 0 #1a1209;
    border-color: var(--burnt-sienna);
}

/* Column spans */
.module--3col { grid-column: span 3; }
.module--4col { grid-column: span 4; }
.module--5col { grid-column: span 5; }
.module--6col { grid-column: span 6; }

/* Clipped corners for feature modules */
.module--clipped {
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

/* --- GRADIENT MESHES --- */
.mesh-a {
    position: relative;
}
.mesh-a::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(194, 112, 62, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 20%, rgba(212, 196, 168, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 40% 80%, rgba(160, 137, 108, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 65%, rgba(245, 236, 215, 0.4) 0%, transparent 60%);
    animation: mesh-drift-a 20s ease-in-out infinite alternate;
    clip-path: inherit;
    pointer-events: none;
}

.mesh-b {
    position: relative;
}
.mesh-b::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg at 50% 50%, #5C4A32 0deg, #8B7355 90deg, #A0896C 180deg, #D4C4A8 270deg, #5C4A32 360deg),
        radial-gradient(ellipse at 50% 50%, rgba(245, 236, 215, 0.6) 0%, transparent 70%);
    opacity: 0.25;
    animation: mesh-drift-b 20s ease-in-out infinite alternate;
    clip-path: inherit;
    pointer-events: none;
}

.mesh-c {
    position: relative;
}
.mesh-c::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(61, 46, 26, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 85%, rgba(194, 112, 62, 0.35) 0%, transparent 60%);
    animation: mesh-drift-c 20s ease-in-out infinite alternate;
    clip-path: inherit;
    pointer-events: none;
}

@keyframes mesh-drift-a {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 5% 8%, -3% 5%, 7% -4%, -5% 6%; }
}

@keyframes mesh-drift-b {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.03) rotate(2deg); }
}

@keyframes mesh-drift-c {
    0% { background-position: 0% 0%, 0% 0%; }
    100% { background-position: 8% 5%, -5% -8%; }
}

/* --- MODULE TYPOGRAPHY --- */
.module-label {
    display: inline-block;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--oxidized-bronze);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.module-label--dark {
    color: var(--faded-bronze);
}

.tilted {
    transform: rotate(-3deg);
    transform-origin: left center;
}

.module-headline {
    font-family: 'Archivo Black', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--dark-mahogany);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 0.88;
    margin-bottom: 20px;
}

.module-headline--light {
    color: var(--parchment);
}

.module-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--dark-mahogany);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 0.88;
    margin-bottom: 14px;
}

.module-title--light {
    color: var(--parchment);
}

.module-body {
    font-family: 'Source Serif 4', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--dark-umber);
    line-height: 1.65;
    max-width: 68ch;
}

.module-body--light {
    color: var(--tea-stain);
}

.module-body--dense {
    font-size: 15px;
    line-height: 1.55;
}

.module-body + .module-body {
    margin-top: 1.2em;
}

.module-meta {
    display: block;
    margin-top: 14px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--faded-bronze);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.module-meta--light {
    color: var(--warm-taupe);
}

/* --- CHEVRON MARKERS --- */
.chevron-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    position: relative;
    margin-right: 4px;
    vertical-align: middle;
}

.chevron-marker::before,
.chevron-marker::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 1px;
    background: var(--faded-bronze);
    top: 50%;
    left: 0;
}

.chevron-marker::before {
    transform: rotate(30deg);
    transform-origin: left center;
}

.chevron-marker::after {
    transform: rotate(-30deg);
    transform-origin: left center;
}

.chevron-marker--light::before,
.chevron-marker--light::after {
    background: var(--warm-taupe);
}

/* --- SKELETON LOADING --- */
.skeleton-layer {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    opacity: 1;
    transition: opacity 400ms ease;
}

.skeleton-layer--dark {
    background: var(--dark-umber);
}

.skeleton-bar {
    height: 14px;
    background: var(--tea-stain);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-bar--dark {
    background: var(--oxidized-bronze);
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.module-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 400ms ease;
}

/* When module is revealed */
.module.revealed .skeleton-layer {
    opacity: 0;
    pointer-events: none;
}

.module.revealed .module-content {
    opacity: 1;
}

/* Module initial state for scroll reveal */
.module[data-skeleton] {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 400ms ease,
                box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.module[data-skeleton].in-view {
    transform: translateY(0);
    opacity: 1;
}

/* --- CONNECTORS --- */
.connector {
    width: 100%;
    height: 40px;
    display: block;
    margin-top: 16px;
    opacity: 0;
    transition: opacity 400ms ease;
}

.connector.visible {
    opacity: 1;
}

.connector line {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 600ms ease;
}

.connector.visible line {
    stroke-dashoffset: 0;
}

/* --- FOOTER --- */
#site-footer {
    background: var(--dark-mahogany);
    border-top: 2px solid var(--faded-bronze);
    padding: 40px 24px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-domain {
    font-family: 'Archivo Black', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--tea-stain);
}

.footer-tagline {
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--warm-taupe);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- RESPONSIVE: TABLET --- */
@media (max-width: 1199px) and (min-width: 768px) {
    .module--3col { grid-column: span 6; }
    .module--4col { grid-column: span 6; }
    .module--5col { grid-column: span 12; }
    .module--6col { grid-column: span 12; }

    .module-headline {
        font-size: 48px;
    }

    #intro-title {
        font-size: 12vw;
    }
}

/* --- RESPONSIVE: MOBILE --- */
@media (max-width: 767px) {
    .module--3col,
    .module--4col,
    .module--5col,
    .module--6col {
        grid-column: span 12;
    }

    .module-headline {
        font-size: 32px;
    }

    .module-title {
        font-size: 20px;
    }

    #intro-title {
        font-size: 14vw;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-link {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .stratum {
        padding: 48px 0;
    }

    .footer-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .connector {
        display: none;
    }

    .module--clipped {
        clip-path: none;
    }
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .mesh-a::before,
    .mesh-b::before,
    .mesh-c::before {
        animation: none;
    }

    .skeleton-bar {
        animation: none;
        opacity: 0.6;
    }

    #line-tl,
    #line-br {
        animation: none;
        stroke-dashoffset: 0;
    }

    #intro-content,
    #intro-subtitle {
        animation: none;
        opacity: 1;
    }

    .module[data-skeleton] {
        transform: none;
        opacity: 1;
    }

    .module-content {
        opacity: 1;
    }

    .skeleton-layer {
        display: none;
    }
}