/* ==========================================================================
   AMJNE Consulting LLC — stainesconsulting.com
   Strict monochrome. One family (Archivo), two widths.
   ========================================================================== */

:root {
    --ink:      #0a0a0a;   /* near-black — richer than pure #000 */
    --paper:    #ffffff;
    --gray-1:   #6b6b6b;   /* secondary text */
    --gray-2:   #9e9e9e;   /* labels, tertiary */
    --gray-inv: #bdbdbd;   /* secondary text on inverted (black) rows */
    --hairline: #e4e4e4;

    --pad: clamp(1.25rem, 5vw, 4rem);   /* horizontal page padding */
    --max: 1200px;
}

/* ---------- Reset / base ---------- */

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

html { scroll-behavior: smooth; }

body {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Layout shell ---------- */

.nav, .hero, .section, .footer {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* ---------- Nav ---------- */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.25rem;
    border-bottom: 1px solid var(--hairline);
}

.nav-mark {
    font-stretch: 125%;
    font-weight: 650;
    font-size: 0.875rem;
    letter-spacing: 0.28em;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-1);
    transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
    padding-top: clamp(5rem, 16vh, 10rem);
    padding-bottom: clamp(3.5rem, 9vh, 6rem);
}

/* The signature: five letters justified edge-to-edge across the measure */
.wordmark {
    display: flex;
    justify-content: space-between;
    font-stretch: 125%;
    font-weight: 620;
    font-size: clamp(4.25rem, 16.5vw, 12.5rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    user-select: none;
}

.wordmark span {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.wordmark span:nth-child(1) { animation-delay: 0.05s; }
.wordmark span:nth-child(2) { animation-delay: 0.11s; }
.wordmark span:nth-child(3) { animation-delay: 0.17s; }
.wordmark span:nth-child(4) { animation-delay: 0.23s; }
.wordmark span:nth-child(5) { animation-delay: 0.29s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(0.3em); }
    to   { opacity: 1; transform: none; }
}

.hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    padding-top: 0.875rem;
    border-top: 1px solid var(--ink);
    font-size: clamp(0.75rem, 1.4vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    animation: fade 0.8s ease 0.45s backwards;
}

.hero-meta-right { color: var(--gray-1); }

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Sections ---------- */

.section {
    padding-block: clamp(4rem, 10vh, 6.5rem);
    border-top: 1px solid var(--hairline);
}

.section-grid {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 2rem;
    align-items: start;
}

.label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-2);
}

.section-label { margin-bottom: 2.5rem; }

.statement {
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 420;
    line-height: 1.4;
    letter-spacing: -0.01em;
    max-width: 38ch;
}



/* ---------- Contact ---------- */

.contact-lede {
    font-size: 0.9375rem;
    color: var(--gray-1);
    margin-bottom: 1.25rem;
}

.contact-email {
    font-stretch: 112%;
    font-weight: 540;
    font-size: clamp(1.5rem, 4.2vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.1em;
    transition: background-color 0.18s ease, color 0.18s ease;
    overflow-wrap: anywhere;
}

.contact-email:hover {
    background: var(--ink);
    color: var(--paper);
}

/* ---------- Footer ---------- */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.75rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--gray-1);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
    .section-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .venture {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding-block: 1.625rem;
    }

    .venture-tag { margin-top: 0.375rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .wordmark span,
    .hero-meta { animation: none; }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}