/* ==========================================================================
   Axiom Law — Big Bang Visibility Showcase
   Self-contained stylesheet. No dependencies on site.css or any shared file.
   ========================================================================== */


/* ==========================================================================
   RESET
   ========================================================================== */

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

img,
picture {
    display: block;
    max-width: 100%;
}

blockquote,
figure {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* Colors */
    --color-charcoal:       #121212;
    --color-off-white:      #F9F9F7;
    --color-cobalt:         #2E5BFF;
    --color-cobalt-light:   #4A75FF;

    /* Borders */
    --border-dark:   1px solid #12121226;   /* on light sections */
    --border-light:  1px solid #F9F9F720;   /* on dark sections */

    /* Spacing — section vertical padding */
    --space-section:    120px;
    --space-section-md:  64px;
    --space-section-sm:  48px;

    /* Spacing — container horizontal padding */
    --space-container:    64px;
    --space-container-md: 32px;
    --space-container-sm: 20px;
}


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

body {
    background: var(--color-charcoal);
    color: var(--color-off-white);
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 104px; /* 64px nav + 40px silo bar */
}


/* ==========================================================================
   FOCUS STATES
   ========================================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid #2E5BFF;
    outline-offset: 2px;
}


/* ==========================================================================
   GRAIN OVERLAY
   Covers entire viewport including fixed nav — intentional editorial texture.
   z-index: 200 sits above nav (100) but pointer-events: none prevents blocking.
   ========================================================================== */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 1000;
    padding: 8px 16px;
    background: #121212;
    color: #F9F9F7;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.skip-link:focus {
    top: 8px;
}


/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #121212;
    z-index: 100;
    border-bottom: 1px solid #F9F9F720;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 64px;
}

.nav__logo {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18px;
    color: #F9F9F7;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav__link {
    position: relative;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    color: #F9F9F7;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Underline slide-in on hover */
.nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #F9F9F7;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.nav__link:hover::after,
.nav__link:focus::after {
    transform: scaleX(1);
}

.nav__cta {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    color: #F9F9F7;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #2E5BFF;
    padding: 12px 24px;
    border-radius: 0;
    transition: background 0.2s ease;
}

.nav__cta:hover,
.nav__cta:focus {
    background: #4A75FF;
}

/* Hamburger button — mobile only */
.nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

.nav__hamburger-line {
    display: block;
    width: 22px;
    height: 1px;
    background: #F9F9F7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger → X when menu is open */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   MOBILE DROPDOWN
   ========================================================================== */

/* Hidden on desktop */
.mobile-dropdown {
    display: none;
}

.mobile-dropdown__link {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(249, 249, 247, 0.7);
    text-decoration: none;
    padding: 16px 20px;
    border-bottom: 1px solid #F9F9F720;
    transition: color 0.2s ease;
}

.mobile-dropdown__link:hover,
.mobile-dropdown__link:focus {
    color: #F9F9F7;
}

.mobile-dropdown__link--cta {
    color: #2E5BFF;
}

.mobile-dropdown__link--cta:hover,
.mobile-dropdown__link--cta:focus {
    color: #4A75FF;
}


/* ==========================================================================
   SILO NAVIGATION BAR
   ========================================================================== */

@keyframes silo-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.silo-bar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: rgba(18, 18, 18, 0.8);
    z-index: 1;
    border-bottom: 1px solid #F9F9F720;
    animation: silo-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.silo-bar__link {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: rgba(249, 249, 247, 0.6);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.silo-bar__link:hover,
.silo-bar__link:focus {
    color: #F9F9F7;
    background-color: rgba(249, 249, 247, 0.08);
}

/* Current page — non-interactive; visually distinct from nav links */
.silo-bar__current {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: #F9F9F7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-cobalt);
}

/* Default: show full text, hide short text */
.silo-bar__short {
    display: none;
}

.silo-bar__full {
    display: inline;
}


/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
    background: #121212;
}

.hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px;
}

.hero__headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.1;
    color: #F9F9F7;
    margin: 0 0 32px 0;
}

.hero__sub {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(249, 249, 247, 0.7);
    margin: 0;
}

.hero__image-wrap {
    overflow: hidden;
}

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


/* ==========================================================================
   SECTION 2: THESES (STRATEGY GRID)
   ========================================================================== */

.theses {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #F9F9F7;
}

.theses__item {
    padding: 48px;
    border-right: 1px solid #12121226;
    transition: background 0.2s ease;
}

.theses__item:last-child {
    border-right: none;
}

.theses__item:hover {
    background: #1212120A;
}

.theses__number {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: rgba(18, 18, 18, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.theses__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #121212;
    margin: 0 0 20px 0;
}

.theses__desc {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #121212;
    margin: 0;
}


/* ==========================================================================
   SECTION 3: PROOF (FEATURED WORK)
   ========================================================================== */

.proof {
    position: relative;
    background-color: #121212;
    background-image: url('images/project-showcase.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    max-height: 600px;
    min-height: 600px;
    overflow: hidden;
}

/* Screen reader image — visually hidden, preserves alt text for assistive tech */
.proof__sr-image {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.proof__caption {
    position: absolute;
    bottom: 24px;
    right: 32px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    color: rgba(249, 249, 247, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}


/* ==========================================================================
   SECTION 4: TESTIMONIAL
   ========================================================================== */

.testimonial {
    background: #121212;
    padding: 100px 64px;
    text-align: center;
    border-top: 1px solid #F9F9F720;
    border-bottom: 1px solid #F9F9F720;
}

.testimonial__inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Decorative hairline above quote */
.testimonial__rule {
    width: 80px;
    height: 1px;
    background: rgba(249, 249, 247, 0.125); /* #F9F9F720 */
    margin: 0 auto 40px auto;
}

.testimonial__quote {
    margin: 0;
    padding: 0;
}

.testimonial__quote p {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 32px;
    line-height: 1.4;
    color: #F9F9F7;
    margin: 0 0 32px 0;
}

.testimonial__attribution {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 13px;
    color: rgba(249, 249, 247, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ==========================================================================
   SECTION 5: CLOSER
   ========================================================================== */

.closer {
    background: #F9F9F7;
    padding: 120px 64px;
    text-align: center;
    border-top: 1px solid #12121226;
}

.closer__inner {
    max-width: 800px;
    margin: 0 auto;
}

.closer__headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.15;
    color: #121212;
    margin: 0 0 16px 0;
}

.closer__benefit {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    color: rgba(18, 18, 18, 0.6);
    margin: 0 0 40px 0;
}

/* Visual-only CTA — not a link, not focusable */
.closer__cta {
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 24px;
    color: #2E5BFF;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   RESPONSIVE — 1024px (tablet landscape)
   ========================================================================== */

@media (max-width: 1024px) {
    .nav__inner {
        padding: 0 32px;
    }

    .hero__text {
        padding: 64px 32px;
    }

    .hero__headline {
        font-size: 40px;
    }

    .theses__item {
        padding: 40px 32px;
    }

    .theses__title {
        font-size: 24px;
    }

    .testimonial {
        padding: 80px 32px;
    }

    .closer {
        padding: 80px 32px;
    }

    .closer__headline {
        font-size: 40px;
    }

    .attribution {
        padding: 24px 32px;
    }
}


/* ==========================================================================
   RESPONSIVE — 768px (tablet portrait / mobile landscape)
   ========================================================================== */

@media (max-width: 768px) {
    /* Body offset: only the 40px silo bar remains fixed above content.
       At 768px the main nav collapses to logo only (same height), so
       padding-top stays 104px. */

    /* Nav: hide text links and CTA, show logo and hamburger */
    .nav__links {
        display: none;
    }

    .nav__inner {
        padding: 0 20px;
    }

    /* Show hamburger button */
    .nav__hamburger {
        display: flex;
    }

    /* Mobile dropdown */
    .mobile-dropdown {
        display: block;
        position: fixed;
        top: 64px; /* Below nav */
        left: 0;
        right: 0;
        z-index: 250; /* Above grain overlay (200) and silo bar (1) */
        background: #121212;
        border-bottom: 1px solid #F9F9F720;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.2s ease, visibility 0.2s ease;
    }

    .mobile-dropdown.is-open {
        max-height: 300px;
        visibility: visible;
    }

    /* Hero: stack vertically — image on top, text below */
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh auto;
        min-height: auto;
    }

    .hero__image-wrap {
        order: -1; /* image on top */
        height: 50vh;
    }

    .hero__image {
        height: 100%;
    }

    .hero__text {
        text-align: center;
        padding: 48px 20px;
    }

    .hero__headline {
        font-size: 36px;
    }

    .hero__sub {
        font-size: 16px;
    }

    /* Theses: single column with horizontal borders */
    .theses {
        grid-template-columns: 1fr;
    }

    .theses__item {
        padding: 40px 20px;
        border-right: none;
        border-bottom: 1px solid #12121226;
    }

    .theses__item:last-child {
        border-bottom: none;
    }

    /* Proof: shorter on mobile, static attachment */
    .proof {
        min-height: 300px;
        max-height: 300px;
        background-attachment: scroll;
    }

    .proof__caption {
        position: static;
        display: block;
        text-align: center;
        padding: 16px 20px;
        background: #121212;
    }

    /* Testimonial */
    .testimonial {
        padding: 64px 20px;
    }

    .testimonial__quote p {
        font-size: 24px;
    }

    /* Closer */
    .closer {
        padding: 64px 20px;
    }

    .closer__headline {
        font-size: 32px;
    }

    .closer__cta {
        font-size: 18px;
    }

    /* Attribution */
    .attribution {
        padding: 24px 20px;
    }
}


/* ==========================================================================
   RESPONSIVE — 480px (small mobile)
   ========================================================================== */

@media (max-width: 480px) {
    /* Silo bar: swap full text for abbreviated text */
    .silo-bar__full {
        display: none;
    }

    .silo-bar__short {
        display: inline;
    }

    .hero__headline {
        font-size: 30px;
    }

    .closer__headline {
        font-size: 28px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* Disable parallax — background-attachment: fixed is effectively an
       animation and causes discomfort for vestibular disorder users */
    .proof {
        background-attachment: scroll;
    }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    body::before {
        display: none; /* Hide grain overlay */
    }

    .nav,
    .silo-bar {
        display: none; /* Hide fixed navigation */
    }

    body {
        padding-top: 0;
    }

    .proof {
        background-attachment: scroll; /* Fixed attachment doesn't print */
    }
}


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

.attribution {
    background: #121212;
    padding: 24px 64px;
    text-align: center;
    border-top: 1px solid #F9F9F720;
}

.attribution__text {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: rgba(249, 249, 247, 0.3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.attribution__link {
    color: rgba(249, 249, 247, 0.3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.attribution__link:hover,
.attribution__link:focus {
    color: rgba(249, 249, 247, 0.5);
}