/* ============================================================
   VELLUM — Design Tokens + Layout + Components
   ============================================================
   Fonts: Aeonik (heading), Inter Tight (body)
   Grid: 4-column, edge padding, NO max-width
   Spacing: ×2 scale (10, 20, 40, 80, 160, 320)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Aeonik';
    src: url('assets/fonts/Aeonik-Light.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('assets/fonts/Aeonik-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('assets/fonts/Aeonik-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}

@layer base, tokens, layout, components, pages;

/* ═══ BASE ═══ */
@layer base {

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

    body {
        background: var(--color-bg);
        color: var(--color-fg);
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

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

/* ═══ TOKENS ═══ */
@layer tokens {
    :root {
        /* Spacing ×2 scale */
        --ds-space-1: 10px;
        --ds-space-2: 20px;
        --ds-space-3: 40px;
        --ds-space-4: 80px;
        --ds-space-5: 160px;
        --ds-space-6: 320px;

        /* Grid */
        --ds-gap: 20px;
        --ds-edge: 40px;

        /* Fonts */
        --font-heading: 'Aeonik', sans-serif;
        --font-body: 'Inter Tight', sans-serif;

        /* Colors */
        --color-bg: #EAEAF2;
        --color-fg: #3A2C3B;
        --color-bg-inv: #0a0a0a;
        /* Hero stays black */
        --color-fg-inv: #EAEAF2;

        /* Motion */
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ─ Font weight utilities ─ */
    .fw-light {
        font-weight: 300;
    }

    .fw-medium {
        font-weight: 500;
    }

    /* ─ Typography from pen ─ */

    /* H1 — Aeonik 120px light */
    .t-h1 {
        font-family: var(--font-heading);
        font-size: clamp(48px, 8.33vw, 120px);
        font-weight: 300;
        line-height: 0.85;
        letter-spacing: -3.6px;
    }

    /* H2 — Aeonik 48px normal */
    .t-h2 {
        font-family: var(--font-heading);
        font-size: clamp(28px, 3.33vw, 48px);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.96px;
    }

    /* H3 — Aeonik 20px medium */
    .t-h3 {
        font-family: var(--font-heading);
        font-size: clamp(16px, 1.39vw, 20px);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -0.4px;
    }

    /* Body — Inter Tight 16px medium */
    .t-body {
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }

    /* Label — Inter Tight 12px */
    .t-label {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.24px;
    }

    .t-label--bold {
        font-weight: 600;
    }

    .t-label--caps {
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Nav — Inter Tight 16px */
    .t-nav {
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.28px;
    }

    .t-nav--bold {
        font-weight: 700;
        letter-spacing: -0.32px;
    }

    /* Big brand — Aeonik, always stretches to viewport width */
    .t-brand-big {
        font-family: var(--font-heading);
        font-size: 39.2vw;
        /* 560/1440 × 100 — scales with viewport */
        font-weight: 900;
        line-height: 0.75;
        letter-spacing: -0.55vw;
        text-transform: lowercase;
    }

    /* Opacity hierarchy */
    .o-100 {
        opacity: 1;
    }

    .o-70 {
        opacity: 0.7;
    }

    .o-50 {
        opacity: 0.5;
    }

    .o-30 {
        opacity: 0.3;
    }
}

/* ═══ LAYOUT ═══ */
@layer layout {

    /* Section: full width, with edge padding */
    .section {
        padding-inline: var(--ds-edge);
    }

    /* Row: 4-column grid */
    .row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ds-gap);
    }

    /* Spacers */
    .sp-10 {
        height: var(--ds-space-1);
    }

    .sp-20 {
        height: var(--ds-space-2);
    }

    .sp-40 {
        height: var(--ds-space-3);
    }

    .sp-80 {
        height: var(--ds-space-4);
    }

    .sp-160 {
        height: var(--ds-space-5);
    }

    /* Col spans */
    .col-1 {
        grid-column-end: span 1;
    }

    .col-2 {
        grid-column-end: span 2;
    }

    .col-3 {
        grid-column-end: span 3;
    }

    .col-4 {
        grid-column-end: span 4;
    }

    .col-start-1 {
        grid-column-start: 1;
    }

    .col-start-2 {
        grid-column-start: 2;
    }

    .col-start-3 {
        grid-column-start: 3;
    }

    .col-start-4 {
        grid-column-start: 4;
    }

    /* ─── Two-layer system: Grid + Free ─── */

    /* Free-container: establishes positioning context */
    .free-container {
        position: relative;
    }

    /* Free element: absolute on desktop, static on mobile */
    .free {
        position: absolute;
        z-index: 1;
    }

    /* Grid content sits above free elements */
    .free-container> :not(.free) {
        position: relative;
        z-index: 2;
    }

    /* Full-bleed: breaks out of section padding */
    .full-bleed {
        margin-inline: calc(-1 * var(--ds-edge));
    }

    /* Inverted section */
    .inv {
        background: var(--color-bg-inv);
        color: var(--color-fg-inv);
    }

    .inv h1,
    .inv h2,
    .inv h3,
    .inv h4,
    .inv p,
    .inv a,
    .inv span,
    .inv div {
        color: var(--color-fg-inv);
    }

    /* ─ Responsive ─ */
    @media (max-width: 1024px) {
        :root {
            --ds-edge: 30px;
        }

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

        .row>[style] {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
        }
    }

    @media (max-width: 640px) {
        :root {
            --ds-edge: 20px;
            --ds-space-2: 12px;
            --ds-space-3: 24px;
            --ds-space-4: 40px;
            --ds-space-5: 60px;
            --ds-gap: 16px;
        }

        .t-body {
            font-size: 13px;
        }

        .t-label {
            font-size: 11px;
        }

        .row {
            grid-template-columns: 1fr;
        }

        /* Free elements → static on mobile (except hero BG) */
        .free:not(.s-hero__bg) {
            position: static !important;
            width: 100% !important;
            left: auto !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            z-index: auto !important;
        }

        [style*="max-width"] {
            max-width: 100% !important;
        }
    }
}

/* ═══ COMPONENTS ═══ */
@layer components {

    /* Button */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        padding: 14px 32px;
        letter-spacing: -0.28px;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn:hover {
        transform: translateY(-2px) scale(1.02);
    }

    .btn--primary {
        background: var(--color-fg);
        color: var(--color-bg);
    }

    .btn--primary:hover {
        background: #4d3c4e;
        box-shadow: 0 8px 30px rgba(58, 44, 59, 0.35);
    }

    .btn--inv {
        background: var(--color-bg);
        color: var(--color-fg);
    }

    .btn--inv:hover {
        background: var(--color-fg);
        color: var(--color-bg);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }

    /* Divider */
    .divider {
        width: 100%;
        height: 1px;
        background: currentColor;
        opacity: 0.5;
    }

    /* Row arrow SVG */
    .row-arrow {
        display: inline-flex;
        align-items: center;
    }

    .row-arrow svg {
        width: auto;
        height: 14px;
        display: block;
    }

    .why-arrow {
        width: auto;
        height: 10px;
        display: inline;
        vertical-align: baseline;
    }

    /* Service row — label left, name center, desc right, arrow far right */
    .service-row {
        display: grid;
        grid-template-columns: 120px 1fr auto auto;
        align-items: baseline;
        padding-block: 18px;
        padding-inline: 0;
        border-top: 1px solid rgba(58, 44, 59, 0.4);
        gap: 20px;
        cursor: pointer;
        transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .service-row:hover {
        background: #3A2C3B;
        color: #EAEAF2;
        padding-inline: 20px;
    }

    .service-row:hover .service-row__label,
    .service-row:hover .o-50 {
        opacity: 0.6;
    }

    .service-row__label {
        opacity: 0.3;
        transition: opacity 0.35s;
    }

    .service-row__arrow {
        opacity: 1;
    }

    /* Credential row — 4 columns: date, name, desc, arrow */
    .cred-row {
        display: grid;
        grid-template-columns: 120px 1fr 1fr auto;
        align-items: baseline;
        padding-block: 18px;
        padding-inline: 0;
        border-top: 1px solid rgba(58, 44, 59, 0.4);
        gap: 20px;
        cursor: pointer;
        transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cred-row:hover {
        background: #3A2C3B;
        color: #EAEAF2;
        padding-inline: 20px;
    }

    .cred-row:hover .cred-row__label,
    .cred-row:hover .o-50 {
        opacity: 0.6;
    }

    .cred-row__label {
        opacity: 0.3;
    }

    /* Photo frame — parallax-ready */
    .photo-frame {
        overflow: hidden;
    }

    .photo-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform;
        transform: scale(1.3);
    }

    /* Responsive components */
    @media (max-width: 640px) {
        .service-row {
            grid-template-columns: auto 1fr auto;
            gap: 8px;
        }

        .service-row__label {
            grid-column: 1 / -1;
        }

        .cred-row {
            grid-template-columns: auto 1fr auto;
            gap: 8px;
        }

        .cred-row__label {
            grid-column: 1 / -1;
        }

        .row-arrow svg {
            height: 12px;
        }
    }
}