/* luminous.day — Chrome-Plated Nostalgia Vault */
/* Fonts: Nunito 800 (display), Varela Round 400 (headings), Karla 400/700 (body) */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: #C0C0C0;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    color: #2E2E2E;
    line-height: 1.65;
    overflow-x: hidden;
}

/* ==============================
   GRID CONTAINER
   ============================== */

.chrome-grid-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    min-height: 100vh;
}

/* ==============================
   MODULE BASE
   ============================== */

.module {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.97);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.module.revealed {
    opacity: 1;
    transform: scale(1);
}

.module:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.module.revealed:hover {
    transform: translateY(-3px) scale(1);
}

.module-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

/* ==============================
   CHROME SURFACES
   ============================== */

.chrome-surface {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #D8D8D8 0%, #E8E8E8 25%, #C8C8C8 50%, #E0E0E0 75%, #D0D0D0 100%);
    z-index: 0;
}

.chrome-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
    z-index: 1;
}

.chrome-surface.surface-dark {
    background: #1A1A1E;
}

.chrome-surface.surface-dark::after {
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px);
}

.chrome-surface.surface-bright {
    background: linear-gradient(135deg, #E0E0E0 0%, #ECECEC 30%, #D8D8D8 60%, #ECECEC 100%);
}

.chrome-surface.surface-mid {
    background: linear-gradient(135deg, #D0D0D0 0%, #DCDCDC 40%, #C8C8C8 70%, #D4D4D4 100%);
}

/* Hover brighten effect on chrome surfaces */
.module:hover .chrome-surface {
    filter: brightness(1.05);
}

/* ==============================
   MODULE GRID PLACEMENT
   ============================== */

/* Hero: luminous — span 6 columns, 3 rows */
.module-luminous {
    grid-column: span 6;
    grid-row: span 3;
    min-height: 360px;
}

/* Hero: .day — span 2 columns, 3 rows (goldenrod accent) */
.module-day {
    grid-column: span 2;
    grid-row: span 3;
    background: #B8860B;
    min-height: 360px;
}

/* Void top right — span 4 columns, 1 row */
.module.void-top {
    grid-column: span 4;
    grid-row: span 1;
    background: #1A1A1E;
    min-height: 80px;
}

/* Large photo — span 6 columns, 4 rows */
.module-photo-large {
    grid-column: span 6;
    grid-row: span 4;
    min-height: 440px;
}

/* Statement — span 4 columns, 2 rows */
.module-statement {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 200px;
}

/* Accent 1 — span 2 columns, 2 rows */
.module-accent-1 {
    grid-column: span 2;
    grid-row: span 2;
    background: #B8860B;
    min-height: 200px;
}

/* Void mid 1 — span 4 columns, 2 rows */
.module.void-mid-1 {
    grid-column: span 4;
    grid-row: span 2;
    background: #1A1A1E;
    min-height: 200px;
}

/* Photo hands — span 4 columns, 3 rows */
.module-photo-hands {
    grid-column: span 4;
    grid-row: span 3;
    min-height: 320px;
}

/* Quote — span 8 columns, 2 rows */
.module-quote {
    grid-column: span 8;
    grid-row: span 2;
    min-height: 220px;
}

/* Data — span 4 columns, 2 rows */
.module-data {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 220px;
}

/* Chrome panel — span 4 columns, 1 row */
.module-chrome-panel {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 100px;
}

/* Void mid 2 — span 2 columns, 1 row */
.module.void-mid-2 {
    grid-column: span 2;
    grid-row: span 1;
    background: #1A1A1E;
    min-height: 100px;
}

/* Mission — span 6 columns, 2 rows */
.module-mission {
    grid-column: span 6;
    grid-row: span 2;
    min-height: 240px;
}

/* Accent 2 — span 2 columns, 2 rows */
.module-accent-2 {
    grid-column: span 2;
    grid-row: span 2;
    background: #B8860B;
    min-height: 240px;
}

/* Photo portrait — span 4 columns, 4 rows */
.module-photo-portrait {
    grid-column: span 4;
    grid-row: span 4;
    min-height: 420px;
}

/* Services — span 4 columns, 3 rows */
.module-services {
    grid-column: span 4;
    grid-row: span 3;
    min-height: 300px;
}

/* Void mid 3 — span 4 columns, 1 row */
.module.void-mid-3 {
    grid-column: span 4;
    grid-row: span 1;
    background: #1A1A1E;
    min-height: 80px;
}

/* Small text — span 4 columns, 1 row */
.module-small-text {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 100px;
}

/* Photo typewriter — span 4 columns, 2 rows */
.module-photo-type {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 220px;
}

/* Void bottom — span 2 columns, 2 rows */
.module.void-bottom {
    grid-column: span 2;
    grid-row: span 2;
    background: #1A1A1E;
    min-height: 220px;
}

/* Reflection — span 2 columns, 2 rows */
.module-reflection {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 220px;
}

/* Footer modules */
.module-footer-domain {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 80px;
}

.module-footer-year {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 80px;
}

.module-footer-note {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 80px;
}

.module-footer-void {
    grid-column: span 2;
    grid-row: span 1;
    background: #1A1A1E;
    min-height: 80px;
}

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

/* Display: Domain title */
.domain-luminous {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 9vw, 144px);
    letter-spacing: -0.03em;
    color: #1A1A1E;
    line-height: 1;
    text-align: center;
}

.domain-day {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 9vw, 144px);
    letter-spacing: -0.03em;
    color: #FFFFFF;
    line-height: 1;
    text-align: center;
}

/* Section headings: Varela Round */
.section-heading {
    font-family: 'Varela Round', sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 3.5vw, 48px);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #4A4A4A;
    margin-bottom: 16px;
}

/* Body text on chrome */
.chrome-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: #3A3A3A;
    text-align: center;
    max-width: 480px;
}

/* Text secondary color */
.text-secondary {
    color: #6B6B6B;
}

/* Captions / Metadata */
.caption-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888888;
    text-align: center;
}

/* ==============================
   ACCENT MODULES (Goldenrod)
   ============================== */

.module-accent-1 .module-content,
.module-accent-2 .module-content {
    justify-content: center;
    align-items: center;
}

.accent-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FFFFFF;
}

.gold-number {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 72px);
    color: #FFFFFF;
    line-height: 1;
    display: block;
    text-align: center;
}

.gold-label {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    text-align: center;
    margin-top: 12px;
}

/* ==============================
   QUOTE MODULE
   ============================== */

.chrome-quote {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.5;
    color: #2E2E2E;
    text-align: center;
    max-width: 640px;
    font-style: italic;
}

.quote-cite {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888888;
    margin-top: 16px;
    font-style: normal;
    display: block;
    text-align: center;
}

/* ==============================
   DATA MODULE (Dark)
   ============================== */

.data-content {
    align-items: stretch;
}

.module-data .module-content {
    justify-content: center;
    align-items: stretch;
    gap: 0;
}

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-row:last-child {
    border-bottom: none;
}

.data-label {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888888;
}

.data-value {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #E8E8E8;
}

/* ==============================
   SERVICES MODULE (Dark)
   ============================== */

.module-services .module-content {
    align-items: flex-start;
    justify-content: center;
}

.module-services .section-heading {
    color: #E8E8E8;
    font-size: clamp(16px, 2vw, 24px);
    margin-bottom: 24px;
}

.services-list {
    list-style: none;
    width: 100%;
}

.services-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.services-list li:last-child {
    border-bottom: none;
}

.svc-num {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #B8860B;
    letter-spacing: 0.05em;
}

.svc-name {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #C8C8C8;
}

/* ==============================
   VINTAGE PHOTOS
   ============================== */

.vintage-photo {
    width: 100%;
    height: 100%;
    position: relative;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    filter: sepia(0.3) contrast(1.1) brightness(0.95) grayscale(0.4);
}

/* Building scene */
.photo-building {
    background: linear-gradient(145deg, #7A7A7A 0%, #9A9A9A 30%, #6A6A6A 60%, #8A8A8A 100%);
}

.photo-building::before {
    content: '';
    position: absolute;
    left: 15%;
    top: 10%;
    width: 35%;
    height: 80%;
    background: linear-gradient(180deg, #5A5A5A 0%, #6A6A6A 50%, #4A4A4A 100%);
}

.photo-building::after {
    content: '';
    position: absolute;
    right: 10%;
    top: 20%;
    width: 30%;
    height: 70%;
    background: repeating-linear-gradient(0deg, #5A5A5A, #5A5A5A 8px, #7A7A7A 8px, #7A7A7A 10px);
}

/* Hands scene */
.photo-hands {
    background: linear-gradient(160deg, #8A8A8A 0%, #6A6A6A 40%, #7A7A7A 70%, #5A5A5A 100%);
}

.photo-hands::before {
    content: '';
    position: absolute;
    left: 20%;
    top: 30%;
    width: 60%;
    height: 40%;
    background: radial-gradient(ellipse at center, #9A9A9A 0%, #6A6A6A 70%);
    border-radius: 40% 40% 30% 30%;
}

.photo-hands::after {
    content: '';
    position: absolute;
    right: 25%;
    bottom: 15%;
    width: 30%;
    height: 25%;
    background: radial-gradient(circle, #5A5A5A, #7A7A7A);
    border-radius: 50%;
}

/* Portrait scene */
.photo-portrait {
    background: linear-gradient(180deg, #6A6A6A 0%, #8A8A8A 30%, #7A7A7A 60%, #5A5A5A 100%);
}

.photo-portrait::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    width: 40%;
    height: 35%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, #9A9A9A 0%, #7A7A7A 60%, transparent 100%);
    border-radius: 45% 45% 40% 40%;
}

.photo-portrait::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 48%;
    width: 55%;
    height: 45%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #7A7A7A 0%, #5A5A5A 100%);
    border-radius: 10% 10% 0 0;
}

/* Typewriter scene */
.photo-typewriter {
    background: linear-gradient(135deg, #6A6A6A 0%, #8A8A8A 50%, #5A5A5A 100%);
}

.photo-typewriter::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 20%;
    width: 80%;
    height: 50%;
    background: linear-gradient(180deg, #4A4A4A 0%, #6A6A6A 40%, #5A5A5A 100%);
    border-radius: 8px 8px 0 0;
}

.photo-typewriter::after {
    content: '';
    position: absolute;
    left: 15%;
    bottom: 15%;
    width: 70%;
    height: 15%;
    background: repeating-linear-gradient(90deg, #5A5A5A, #5A5A5A 6px, #7A7A7A 6px, #7A7A7A 8px);
    border-radius: 2px;
}

/* Photo grain overlay */
.photo-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    mix-blend-mode: overlay;
}

.photo-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    z-index: 3;
}

.photo-content {
    padding: 0;
}

.photo-content .vintage-photo {
    position: absolute;
    inset: 0;
}

/* Sepia overlay on photos */
.photo-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #8B7355;
    mix-blend-mode: color;
    opacity: 0.15;
    z-index: 2;
    pointer-events: none;
}

/* ==============================
   CHROME LINES (Decorative)
   ============================== */

.chrome-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 80%;
}

.chrome-lines span {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #A0A0A0 20%, #C8C8C8 50%, #A0A0A0 80%, transparent 100%);
}

.chrome-lines span:nth-child(2) { width: 85%; margin-left: auto; }
.chrome-lines span:nth-child(3) { width: 70%; }
.chrome-lines span:nth-child(4) { width: 90%; margin-left: auto; }
.chrome-lines span:nth-child(5) { width: 60%; }

/* ==============================
   GRADIENT SWEEP (Reflection)
   ============================== */

.gradient-sweep {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #D0D0D0 0%,
        #ECECEC 20%,
        #D8D8D8 40%,
        #E8E8E8 50%,
        #C8C8C8 60%,
        #ECECEC 80%,
        #D4D4D4 100%
    );
    animation: shimmer 8s ease-in-out infinite alternate;
}

@keyframes shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* ==============================
   FOOTER
   ============================== */

.footer-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #888888;
}

/* ==============================
   VOID MODULES
   ============================== */

.module.void-top,
.module.void-mid-1,
.module.void-mid-2,
.module.void-mid-3,
.module.void-bottom,
.module-footer-void {
    cursor: default;
}

.module.void-top:hover,
.module.void-mid-1:hover,
.module.void-mid-2:hover,
.module.void-mid-3:hover,
.module.void-bottom:hover,
.module-footer-void:hover {
    transform: none;
    box-shadow: none;
}

.module.void-top.revealed:hover,
.module.void-mid-1.revealed:hover,
.module.void-mid-2.revealed:hover,
.module.void-mid-3.revealed:hover,
.module.void-bottom.revealed:hover,
.module-footer-void.revealed:hover {
    transform: scale(1);
}

/* ==============================
   RESPONSIVE: TABLET (< 768px)
   ============================== */

@media (max-width: 768px) {
    .chrome-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .module-luminous {
        grid-column: span 3;
        grid-row: span 2;
        min-height: 240px;
    }

    .module-day {
        grid-column: span 1;
        grid-row: span 2;
        min-height: 240px;
    }

    .module.void-top {
        grid-column: span 4;
        grid-row: span 1;
    }

    .module-photo-large {
        grid-column: span 4;
        grid-row: span 3;
        min-height: 300px;
    }

    .module-statement {
        grid-column: span 3;
        grid-row: span 1;
    }

    .module-accent-1 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .module.void-mid-1 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-photo-hands {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module-quote {
        grid-column: span 4;
        grid-row: span 2;
    }

    .module-data {
        grid-column: span 4;
        grid-row: span 1;
    }

    .module-chrome-panel {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module.void-mid-2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-mission {
        grid-column: span 4;
        grid-row: span 2;
    }

    .module-accent-2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-photo-portrait {
        grid-column: span 2;
        grid-row: span 3;
    }

    .module-services {
        grid-column: span 4;
        grid-row: span 2;
    }

    .module.void-mid-3 {
        grid-column: span 4;
        grid-row: span 1;
    }

    .module-small-text {
        grid-column: span 4;
        grid-row: span 1;
    }

    .module-photo-type {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module.void-bottom {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module-reflection {
        grid-column: span 4;
        grid-row: span 1;
    }

    .module-footer-domain,
    .module-footer-note {
        grid-column: span 2;
    }

    .module-footer-year {
        grid-column: span 1;
    }

    .module-footer-void {
        grid-column: span 1;
    }

    .domain-luminous,
    .domain-day {
        font-size: clamp(40px, 8vw, 80px);
    }

    body {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* ==============================
   RESPONSIVE: MOBILE (< 480px)
   ============================== */

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

    .module-luminous {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 200px;
    }

    .module-day {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 100px;
    }

    .module.void-top {
        grid-column: span 2;
    }

    .module-photo-large {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 240px;
    }

    .module-statement {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-accent-1 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .module.void-mid-1 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .module-photo-hands {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module-quote {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module-data {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-chrome-panel {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module.void-mid-2 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-mission {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-accent-2 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .module-photo-portrait {
        grid-column: span 1;
        grid-row: span 2;
    }

    .module-services {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module.void-mid-3 {
        grid-column: span 2;
    }

    .module-small-text {
        grid-column: span 2;
    }

    .module-photo-type {
        grid-column: span 2;
        grid-row: span 2;
    }

    .module.void-bottom {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-reflection {
        grid-column: span 2;
        grid-row: span 1;
    }

    .module-footer-domain {
        grid-column: span 2;
    }

    .module-footer-year {
        grid-column: span 1;
    }

    .module-footer-note {
        grid-column: span 1;
    }

    .module-footer-void {
        display: none;
    }

    .domain-luminous,
    .domain-day {
        font-size: clamp(32px, 12vw, 64px);
    }

    .chrome-quote {
        font-size: 16px;
    }

    .module-content {
        padding: 16px;
    }
}