/* ════════════════════════════════════════════
       TEJON PAGE — DESIGN SYSTEM OVERRIDES
    ════════════════════════════════════════════ */

/* Pure black canvas for this page */
body { background: #000000; }

/* ────────────────────────────────────────
   SECTION 1 · HERO
──────────────────────────────────────── */
.tj-hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000000;
    overflow: hidden;
}

/* Horizontal scanline texture */
.tj-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.012) 0px,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 5px
    );
    pointer-events: none;
    z-index: 1;
}

/* Radial ambient glow — pulsates via GSAP */
.tj-hero__glow {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(255,255,255,0.065) 0%,
            rgba(255,255,255,0.02)  40%,
            transparent             72%
    );
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}

/* Vertical side rules */
.tj-hero__rule-l,
.tj-hero__rule-r {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 180px;
    background: linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.12),
            transparent
    );
    z-index: 2;
}
.tj-hero__rule-l { left:  clamp(24px, 5vw, 88px); }
.tj-hero__rule-r { right: clamp(24px, 5vw, 88px); }

/* Main content stack */
.tj-hero__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 0 clamp(24px, 5vw, 80px);
}

.tj-hero__eyebrow {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 36px;
    will-change: opacity, transform;
}

.tj-hero__logo-wrap {
    margin-bottom: 44px;
    will-change: opacity, transform;
}

.tj-hero__logo {
    width: clamp(160px, 26vw, 320px);
    height: auto;
    display: block;
    filter:
            drop-shadow(0 0 48px rgba(255,255,255,0.13))
            drop-shadow(0 0 110px rgba(255,255,255,0.06));
    will-change: transform, filter;
}

/* Clip mask for headline slide-up */
.tj-hero__title-clip {
    overflow: hidden;
    margin-bottom: 28px;
}

.tj-hero__title {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(72px, 16vw, 210px);
    line-height: 0.86;
    letter-spacing: -0.015em;
    color: #ffffff;
    display: block;
    will-change: transform;
}

.tj-hero__sub {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(14px, 1.4vw, 20px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.02em;
    will-change: opacity, transform;
}

/* Scroll indicator */
.tj-hero__scroll {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tj-hero__scroll-lbl {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.18);
}

.tj-hero__scroll-track {
    width: 1px;
    height: 54px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
    border-radius: 2px;
}

.tj-hero__scroll-fill {
    width: 100%;
    height: 48%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
    animation: tjScrollDrop 2.1s ease-in-out infinite;
}

@keyframes tjScrollDrop {
    0%   { transform: translateY(-110%); }
    100% { transform: translateY(220%); }
}

/* ────────────────────────────────────────
   SECTION 2 · NARRATIVE — STACKED EDITORIAL
──────────────────────────────────────── */
.tj-narrative {
    background: #000000;
    position: relative;
}

/* Faint top rule */
.tj-narrative::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
            to right,
            transparent 0%,
            rgba(255,255,255,0.09) 30%,
            rgba(255,255,255,0.09) 70%,
            transparent 100%
    );
}

/* ── Section header — centered, generous padding ── */
.tj-narrative__header {
    max-width: 1200px;
    margin: 0 auto;
    /*padding: clamp(80px, 11vw, 144px) clamp(24px, 6vw, 96px) clamp(40px, 5vw, 72px);*/
    padding: clamp(80px, 11vw, 1px) clamp(24px, 6vw, 96px) clamp(40px, 5vw, 1px);
    position: relative;
}

.tj-narrative__chapter-num {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(80px, 14vw, 180px);
    line-height: 0.83;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,0.04);
    display: block;
    user-select: none;
    pointer-events: none;
    margin-bottom: 8px;
}

.tj-narrative__heading-clip {
    overflow: hidden;
}

.tj-narrative__h2 {
    font-family: 'AloeveraDisplay', sans-serif;
    /*font-size: clamp(56px, 9vw, 140px);*/
    font-size: clamp(56px, 9vw, 55px);
    line-height: 0.88;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
}

.tj-narrative__h2-line {
    display: block;
    will-change: transform;
}

/* ── Paragraph blocks — centred, max-width for readability ── */
.tj-narrative__p-block {
    max-width: 1200px;
    margin: 0 auto;
    /*padding: clamp(52px, 7vw, 96px) clamp(24px, 6vw, 96px);*/
    padding: clamp(52px, 7vw, 96px) clamp(24px, 6vw, 96px);
    will-change: opacity, transform;
}

.tj-narrative__p-text {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255,255,255,0.48);
}

.tj-narrative__p-text strong {
    color: rgba(255,255,255,0.82);
    font-weight: 500;
}

/* ── Full-width image blocks ── */
.tj-narrative__img-block {
    width: 100%;
    overflow: hidden;
    position: relative;
    will-change: transform, opacity;
}

/* Inner wrapper for parallax transform */
.tj-narrative__img-inner {
    will-change: transform;
}

.tj-narrative__img-block img {
    width: 100%;
    height: clamp(320px, 58vh, 720px);
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Subtle top + bottom gradient to blend into black */
.tj-narrative__img-overlay {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom,
            rgba(0,0,0,0.38) 0%,
            transparent      18%,
            transparent      82%,
            rgba(0,0,0,0.38) 100%
            );
    pointer-events: none;
}

/* ────────────────────────────────────────
   SECTION 1 · HERO — FULL-SCREEN IMAGE
──────────────────────────────────────── */
.tj-feature {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
}

/* Scanline texture on top of image */
.tj-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.008) 0px,
            rgba(255,255,255,0.008) 1px,
            transparent 1px,
            transparent 5px
    );
    pointer-events: none;
    z-index: 2;
}

/* Image fills full viewport */
.tj-feature__parallax {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.tj-feature__img {
    width: 100%;
    height: 115%;          /* extra height for parallax travel */
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* Multi-layer overlay: top darkening + bottom gradient */
.tj-feature__overlay {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom,
            rgba(0,0,0,0.62) 0%,
            rgba(0,0,0,0.28) 30%,
            rgba(0,0,0,0.28) 55%,
            rgba(0,0,0,0.80) 100%
            );
    pointer-events: none;
    z-index: 1;
}

/* Centred hero content — sits above image and overlay */
.tj-feature__hero {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 120px clamp(24px, 5vw, 80px) 80px;
}

.tj-feature__eyebrow {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 36px;
    will-change: opacity, transform;
}

.tj-feature__logo-wrap {
    margin-bottom: 44px;
    will-change: opacity, transform;
}

.tj-feature__logo {
    width: clamp(160px, 26vw, 300px);
    height: auto;
    display: block;
    filter:
            drop-shadow(0 0 48px rgba(255,255,255,0.20))
            drop-shadow(0 0 100px rgba(255,255,255,0.10));
    will-change: transform, filter;
}

.tj-feature__title-clip {
    overflow: hidden;
    margin-bottom: 28px;
}

.tj-feature__title {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    display: block;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
    will-change: transform;
}

.tj-feature__sub {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(14px, 1.4vw, 20px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
    will-change: opacity, transform;
}

/* Caption at bottom-left (location tag) */
.tj-feature__caption {
    position: absolute;
    bottom: clamp(52px, 7vw, 80px);
    left: clamp(24px, 6vw, 96px);
    right: clamp(24px, 6vw, 96px);
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.tj-feature__meta {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    text-align: right;
    flex-shrink: 0;
    will-change: opacity;
}

/* Scroll indicator */
.tj-feature__scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tj-feature__scroll-lbl {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
}

.tj-feature__scroll-track {
    width: 1px;
    height: 54px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
    border-radius: 2px;
}

.tj-feature__scroll-fill {
    width: 100%;
    height: 48%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.60), transparent);
    animation: tjScrollDrop 2.1s ease-in-out infinite;
}

/* Side vertical rules */
.tj-feature__rule-l,
.tj-feature__rule-r {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 180px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent);
    z-index: 3;
}
.tj-feature__rule-l { left:  clamp(24px, 5vw, 88px); }
.tj-feature__rule-r { right: clamp(24px, 5vw, 88px); }

/* ────────────────────────────────────────
   SECTION 4 · EDITORIAL IMAGE GRID
──────────────────────────────────────── */
.tj-gallery {
    background: #000000;
    padding: clamp(20px, 2.5vw, 40px) clamp(20px, 2.5vw, 40px) clamp(48px, 6vw, 80px);
}

.tj-gallery__grid {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.tj-gallery__cell {
    position: relative;
    overflow: hidden;
    background: #080808;
    cursor: default;
    will-change: transform, opacity;
}

/* Image 02 — tall left column, spans 2 rows */
.tj-gallery__cell--a {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Image 03 — top center */
.tj-gallery__cell--b {
    grid-column: 2;
    grid-row: 1;
}

/* Image 04 — top right */
.tj-gallery__cell--c {
    grid-column: 3;
    grid-row: 1;
}

/* Ghost caption cells bottom row */
.tj-gallery__caption-row {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    align-items: center;
    padding: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 28px);
    border: 1px solid rgba(255,255,255,0.06);
}

.tj-gallery__caption-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tj-gallery__caption-label {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
}

.tj-gallery__caption-title {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(28px, 3.5vw, 52px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.88);
}

.tj-gallery__caption-body {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(14px, 1.1vw, 17px);
    font-style: italic;
    line-height: 1.55;
    color: rgba(255,255,255,0.3);
    max-width: 36ch;
}

.tj-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 260px;
    transition: transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.tj-gallery__cell--a .tj-gallery__img { min-height: 540px; }

.tj-gallery__cell:hover .tj-gallery__img {
    transform: scale(1.035);
}

/* Subtle inner overlay */
.tj-gallery__cell-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0,0,0,0.45) 100%
    );
    pointer-events: none;
}

/* Ghost number watermark */
.tj-gallery__cell-num {
    position: absolute;
    top: 12px;
    right: 14px;
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 38px;
    line-height: 1;
    color: rgba(255,255,255,0.055);
    user-select: none;
    pointer-events: none;
}

/* ────────────────────────────────────────
   DIVIDER — CARAVANA STRIP
──────────────────────────────────────── */
.tj-strip {
    background: #000000;
    padding: clamp(40px, 5vw, 64px) clamp(24px, 6vw, 96px);
    border-top:    1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tj-strip__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
}

.tj-strip__line {
    flex: 1;
    /*height: 1px;*/
    height: 3px;
    /*background: linear-gradient(to right, transparent, rgba(255,255,255,0.10));*/
    background: linear-gradient(to right, transparent, rgba(255,255,255));
}

.tj-strip__line--r {
    /*background: linear-gradient(to left, transparent, rgba(255,255,255,0.10));*/
    background: linear-gradient(to left, transparent, rgba(255,255,255));
}

.tj-strip__label {
    font-family: 'AloeveraDisplay', sans-serif;
    /*font-size: 9.5px;*/
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}

/* ────────────────────────────────────────
   SECTION 5 · FULL BANNER (PRESENTACION)
──────────────────────────────────────── */
.tj-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
}

.tj-banner__parallax {
    will-change: transform;
}

.tj-banner__img {
    width: 100%;
    height: clamp(360px, 54vh, 720px);
    object-fit: cover;
    object-position: center center;
    display: block;
}

.tj-banner__overlay {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom,
            rgba(0,0,0,0.58) 0%,
            rgba(0,0,0,0.08) 28%,
            rgba(0,0,0,0.08) 68%,
            rgba(0,0,0,0.62) 100%
            );
    pointer-events: none;
}

/* ────────────────────────────────────────
   SECTION 6 · CLOSING QUOTE
──────────────────────────────────────── */
.tj-closing {
    background: #000000;
    padding: clamp(96px, 14vw, 180px) clamp(24px, 6vw, 96px);
    position: relative;
    overflow: hidden;
}

/* Very faint top border */
.tj-closing::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
            to right,
            transparent 0%,
            rgba(255,255,255,0.07) 30%,
            rgba(255,255,255,0.07) 70%,
            transparent 100%
    );
}

.tj-closing__wrap {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Giant decorative quotation mark */
.tj-closing__mark {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(88px, 16vw, 170px);
    line-height: 0.55;
    color: rgba(255,255,255,0.055);
    display: block;
    margin-bottom: 28px;
    user-select: none;
    pointer-events: none;
}

/* Clip for slide-up animation */
.tj-closing__quote-clip {
    overflow: hidden;
}

.tj-closing__quote-line {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: clamp(34px, 5.5vw, 76px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    display: block;
    will-change: transform;
}

.tj-closing__rule {
    width: 36px;
    height: 1px;
    background: rgba(255,255,255,0.24);
    margin: 40px auto 20px;
    will-change: transform, opacity;
}

.tj-closing__cite {
    font-family: 'AloeveraDisplay', sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.20);
    will-change: opacity;
}

/* ────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */

/* Tablet: 2-column gallery */
@media (max-width: 1100px) {
    .tj-gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .tj-gallery__cell--a {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .tj-gallery__cell--a .tj-gallery__img { min-height: 340px; }
    .tj-gallery__cell--b { grid-column: 1; grid-row: 2; }
    .tj-gallery__cell--c { grid-column: 2; grid-row: 2; }
    .tj-gallery__caption-row {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

/* Large mobile */
@media (max-width: 768px) {
    .tj-narrative__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .tj-narrative__aside {
        position: static;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 40px;
    }
    .tj-narrative__chapter-num { font-size: 72px; }
    .tj-narrative__chapter-lbl { margin-top: 0; }
    .tj-narrative__chapter-rule { margin-top: 0; }

    .tj-feature__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .tj-feature__meta { text-align: left; }

    .tj-gallery__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .tj-gallery__cell--a,
    .tj-gallery__cell--b,
    .tj-gallery__cell--c {
        grid-column: 1;
        grid-row: auto;
    }
    .tj-gallery__caption-row {
        grid-column: 1;
        grid-row: auto;
    }
    .tj-gallery__cell--a .tj-gallery__img { min-height: 300px; }

    .tj-closing__quote-line { font-size: clamp(28px, 8vw, 52px); }

    /* ── Imágenes sin recorte en mobile ── */

    /* Contenedor: sin overflow:hidden para que el parallax no corte */
    .tj-narrative__img-block {
        overflow: visible;
    }

    /* Inner: sin transform inicial (parallax desactivado en mobile) */
    .tj-narrative__img-inner {
        transform: none !important;
    }

    /* Imagen a proporción natural, sin altura fija ni recorte */
    .tj-narrative__img-block img {
        height: auto;
        object-fit: initial;
        width: 100%;
    }

    /* Banner a proporción natural */
    .tj-banner {
        overflow: visible;
    }
    .tj-banner__parallax {
        transform: none !important;
    }
    .tj-banner__img {
        height: auto;
        object-fit: initial;
    }

    /* Padding de párrafos más compacto en mobile */
    .tj-narrative__p-block {
        padding: clamp(32px, 5vw, 52px) clamp(24px, 6vw, 48px);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .tj-hero__rule-l,
    .tj-hero__rule-r { display: none; }
    .tj-hero__eyebrow { letter-spacing: 0.28em; }
}