/* RESET & BASE */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--void-black);
    color: var(--paper-white);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--paper-white);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

a:hover {
    color: var(--sine-red);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* TYPOGRAPHY */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Chivo';
    src: url('../fonts/chivo-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.display-title {
    font-size: clamp(var(--scale-3xl), 8vw, var(--scale-4xl));
    margin-bottom: var(--space-6);
}

h1 { font-size: var(--scale-3xl); margin-bottom: var(--space-8); }
h2 { font-size: var(--scale-2xl); margin-bottom: var(--space-6); }
h3 { font-size: var(--scale-xl); margin-bottom: var(--space-4); }

.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
    color: var(--sine-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.lede {
    font-size: var(--scale-lg);
    color: #a0a0a0;
    max-width: 65ch;
    margin-bottom: var(--space-8);
}
.lede-light {
    font-size: var(--scale-lg);
    color: #ffd8cc;
    max-width: 65ch;
    margin-bottom: var(--space-8);
}

/* LAYOUT UTILS */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container { padding: 0 var(--space-8); }
}

.bg-studio-grey { background-color: var(--studio-grey); }
.bg-sine-red { background-color: var(--sine-red); color: var(--clinical-white); }
.bg-warning-tint { background-color: rgba(255, 69, 0, 0.05); }

.border-y { border-top: 1px solid var(--structural-grey); border-bottom: 1px solid var(--structural-grey); }
.border-t { border-top: 1px solid var(--structural-grey); }
.border-right { border-right: 1px solid var(--structural-grey); }
.minimal-border { border-bottom: 1px solid var(--structural-grey); padding-bottom: var(--space-6); margin-bottom: var(--space-8); }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.justify-center { justify-content: center; }

/* HEADER */
.site-header {
    border-bottom: 1px solid var(--structural-grey);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    background: rgba(12, 12, 12, 0.9);
    backdrop-filter: blur(8px);
    z-index: 100;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.logo a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--scale-lg);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logo svg {
    color: var(--sine-red);
}

.main-nav {
    display: flex;
    gap: var(--space-6);
}

.main-nav a {
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
    text-decoration: none;
    text-transform: uppercase;
}

.main-nav a[aria-current="page"] {
    color: var(--sine-red);
    border-bottom: 2px solid var(--sine-red);
}

/* 1. ARCHITECTURAL HERO */
.hero-brutalist {
    padding: var(--space-16) 0;
}
.full-bleed-border { border-bottom: 2px solid var(--paper-white); }

.hero-grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid-asymmetric {
        grid-template-columns: 2fr 1fr;
    }
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.complex-wave {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: screen;
}

/* BUTTONS & FORMS */
.btn {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-primary {
    background-color: var(--sine-red);
    color: var(--clinical-white);
}

.btn-primary:hover {
    background-color: var(--sine-red-hover);
    color: var(--clinical-white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--paper-white);
    border-color: var(--structural-grey);
}

.btn-secondary:hover {
    border-color: var(--paper-white);
}

.btn-inverted {
    background-color: var(--clinical-white);
    color: var(--void-black);
}
.btn-inverted:hover {
    background-color: var(--paper-white);
}

.form-control, .form-select {
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: var(--studio-grey);
    border: 1px solid var(--structural-grey);
    color: var(--paper-white);
    font-family: var(--font-mono);
    font-size: var(--scale-base);
}

input[type="range"] {
    width: 100%;
    accent-color: var(--sine-red);
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.slider-group label {
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
    color: #a0a0a0;
}

.input-group { margin-bottom: var(--space-4); }
.input-group label { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--scale-sm); }


/* 2. THE PROBLEM STATEMENT */
.section-manifesto {
    padding: var(--space-16) 0;
}

.manifesto-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 1024px) {
    .manifesto-layout {
        grid-template-columns: 1fr 1fr;
    }
}
.manifesto-huge {
    font-family: var(--font-display);
    font-size: var(--scale-3xl);
    line-height: 1;
    text-transform: uppercase;
    color: var(--sine-red);
}
.manifesto-body p {
    font-size: var(--scale-lg);
    margin-bottom: var(--space-4);
}

/* 3. CORE INSTRUMENTS DIRECTORY */
.section-tools-grid { padding: var(--space-16) 0; }
.tools-grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--structural-grey);
    border-left: 1px solid var(--structural-grey);
}
.tool-card-brutal {
    border-bottom: 1px solid var(--structural-grey);
    border-right: 1px solid var(--structural-grey);
    padding: var(--space-6);
    background: var(--studio-grey);
    transition: background 0.2s;
    display: flex;
    flex-direction: column;
}
.tool-card-brutal:hover { background: var(--void-black); }
.card-number {
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
    color: var(--sine-red);
    margin-bottom: var(--space-4);
}
.card-content h3 { font-size: var(--scale-lg); margin-bottom: var(--space-2); }
.card-content h3 a { text-decoration: none; }
.card-content h3 a::after { content: ''; position: absolute; inset: 0; }
.card-content p { font-size: var(--scale-sm); color: #a0a0a0; }


/* 4. DATA / SPLIT EDITORIAL */
.section-editorial-split { padding: var(--space-16) 0; }
.split-layout-reverse {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
}
@media (min-width: 1024px) {
    .split-layout-reverse { grid-template-columns: 1fr 1.5fr; direction: rtl; }
    .split-content, .split-data-grid { direction: ltr; }
}
.split-content p { margin-bottom: var(--space-4); }

.split-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-left: 4px solid var(--sine-red);
    padding-left: var(--space-6);
}
.data-cell { padding: var(--space-6) 0; }
.data-number {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--scale-4xl);
    color: var(--paper-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.data-number small { font-size: var(--scale-base); color: var(--sine-red); }
.data-label { display: block; font-size: var(--scale-sm); color: #a0a0a0; text-transform: uppercase; font-family: var(--font-display); letter-spacing: 0.05em; }

/* 5. SECONDARY TOOLS (TABLE) */
.section-list-view { padding: var(--space-16) 0; }
.brutalist-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--scale-sm);
}
.brutalist-table th, .brutalist-table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--structural-grey);
    text-align: left;
}
.brutalist-table th { color: #a0a0a0; text-transform: uppercase; font-weight: normal; }
.brutalist-table tr:hover td { background: var(--studio-grey); }
@media (max-width: 768px) {
    .brutalist-table th:nth-child(3), .brutalist-table td:nth-child(3) { display: none; }
}

/* 6. HARDWARE WARNING */
.section-technical-aside { padding: var(--space-8) 0; border-y: 1px solid var(--sine-red); }
.aside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
}
.aside-icon { padding-top: var(--space-2); }
.aside-text h3 { color: var(--sine-red); margin-bottom: var(--space-2); font-size: var(--scale-lg); }

/* 7. FULL BLEED SVG */
.section-full-bleed-graphic { width: 100%; overflow: hidden; line-height: 0; }
.graphic-container { width: 100%; }
.tech-waveform { display: block; width: 100%; height: auto; }

/* 8. METHODOLOGIES */
.section-methodologies { padding: var(--space-16) 0; }
.method-grid {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--structural-grey);
}
@media (min-width: 768px) { .method-grid { grid-template-columns: 1fr 1fr; } }
.method-block { padding: var(--space-8); }
.method-duration {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--scale-xl);
    background: var(--paper-white);
    color: var(--void-black);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 767px) { .method-block.border-right { border-right: none; border-bottom: 1px solid var(--structural-grey); } }

/* 9. ADVANCED TOOLS */
.section-advanced-tools { padding: var(--space-16) 0; }
.tool-card-minimal {
    padding: var(--space-6);
    border-bottom: 1px solid var(--structural-grey);
    border-right: 1px solid var(--structural-grey);
}
.tool-card-minimal h3 { font-size: var(--scale-base); margin-bottom: var(--space-2); }
.tool-card-minimal p { font-size: var(--scale-sm); color: #a0a0a0; margin: 0; }

/* 10. FAQ */
.section-faq { padding: var(--space-16) 0; }
.faq-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 1fr 2fr; } }
.faq-header h2 { color: var(--sine-red); }
.brutalist-details {
    border-bottom: 1px solid var(--structural-grey);
}
.brutalist-details summary {
    padding: var(--space-4) 0;
    font-family: var(--font-display);
    font-size: var(--scale-lg);
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.brutalist-details summary::-webkit-details-marker { display: none; }
.details-content { padding-bottom: var(--space-4); color: #a0a0a0; }

/* 11. OFFLINE TECH */
.section-offline-tech { padding: var(--space-16) 0; }
.tech-layout { text-align: center; max-width: 800px; margin: 0 auto; }
.tech-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin: var(--space-8) 0;
    flex-wrap: wrap;
}
.tech-stat { display: flex; flex-direction: column; align-items: center; }
.tech-stat strong { font-family: var(--font-mono); font-size: var(--scale-3xl); color: var(--sine-red); }
.tech-stat span { font-family: var(--font-display); text-transform: uppercase; font-size: var(--scale-sm); color: #a0a0a0; }

/* 12. RESEARCH INDEX */
.section-research-index { padding: var(--space-16) 0; }
.directory-list-dense { list-style: none; }
.directory-list-dense li {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    border-bottom: 1px dotted var(--structural-grey);
    padding: var(--space-2) 0;
}
.doc-id { font-family: var(--font-mono); font-size: var(--scale-xs); color: var(--sine-red); min-width: 60px; }
.directory-list-dense a { text-decoration: none; font-size: var(--scale-sm); }
.directory-list-dense a:hover { color: var(--sine-red); }

/* 13. CTA SECTIONS */
.section-hearing-test { padding: var(--space-12) 0; }
.section-final-cta { padding: var(--space-16) 0; }


/* GENERAL TOOL INTERFACES (Existing layout rules kept for subpages) */
.tool-layout { padding: var(--space-12) 0; }
.tool-header { border-bottom: 1px solid var(--structural-grey); padding-bottom: var(--space-8); margin-bottom: var(--space-8); }
.tool-interface { background-color: var(--studio-grey); border: 1px solid var(--structural-grey); padding: var(--space-8); margin-bottom: var(--space-12); }
.controls-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .controls-grid { grid-template-columns: 1fr 1fr; } }
.timer-display { font-family: var(--font-mono); font-size: clamp(var(--scale-4xl), 15vw, 8rem); text-align: center; line-height: 1; margin-bottom: var(--space-8); color: var(--clinical-white); }
.timer-controls { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.timer-settings { display: flex; justify-content: center; gap: var(--space-6); font-family: var(--font-mono); font-size: var(--scale-sm); }
.result-box { background: var(--structural-grey); padding: var(--space-4); font-family: var(--font-mono); border-left: 4px solid var(--sine-red); }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.tool-card { border: 1px solid var(--structural-grey); padding: var(--space-6); background: var(--studio-grey); transition: transform 0.2s, border-color 0.2s; }
.tool-card:hover { transform: translateY(-4px); border-color: var(--sine-red); }

/* EDITORIAL CONTENT */
.editorial-content { max-width: 70ch; margin: 0 auto; padding: var(--space-12) 0; }
.editorial-content p { margin-bottom: var(--space-6); }
.editorial-content h2 { margin-top: var(--space-12); border-top: 1px solid var(--structural-grey); padding-top: var(--space-6); }
.editorial-content ul, .editorial-content ol { margin-bottom: var(--space-6); padding-left: var(--space-6); }
.editorial-content li { margin-bottom: var(--space-2); }
.callout-box { border: 1px solid var(--structural-grey); padding: var(--space-6); margin: var(--space-8) 0; background: var(--studio-grey); border-left: 4px solid var(--sine-red); }
.callout-box strong { display: block; font-family: var(--font-display); text-transform: uppercase; margin-bottom: var(--space-2); color: var(--clinical-white); }
.directory-list { list-style: none; }
.directory-list li { border-bottom: 1px solid var(--structural-grey); padding: var(--space-6) 0; }
.directory-list li:last-child { border-bottom: none; }
.directory-list h3 { margin-bottom: var(--space-2); }
.directory-list h3 a { text-decoration: none; }

.page-header { padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--structural-grey); margin-bottom: var(--space-8); }
.meta-data { font-family: var(--font-mono); font-size: var(--scale-sm); color: #a0a0a0; margin-bottom: var(--space-6); }

.content-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 1024px) { .content-grid { grid-template-columns: 2fr 1fr; gap: var(--space-16); } }
.sidebar-widget { background: var(--studio-grey); padding: var(--space-6); border: 1px solid var(--structural-grey); }

.alert { padding: var(--space-4); margin-bottom: var(--space-6); font-family: var(--font-mono); font-size: var(--scale-sm); border: 1px solid; }
.alert-warning { background: rgba(255, 69, 0, 0.1); border-color: var(--sine-red); color: var(--clinical-white); }

/* FOOTER */
.site-footer { border-top: 1px solid var(--structural-grey); padding: var(--space-12) 0 var(--space-6); background: var(--studio-grey); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-col strong { display: block; font-family: var(--font-display); text-transform: uppercase; margin-bottom: var(--space-4); color: var(--clinical-white); }
.footer-col p { font-size: var(--scale-sm); color: #a0a0a0; }
.footer-col nav { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col nav a { font-size: var(--scale-sm); color: #a0a0a0; text-decoration: none; }
.footer-col nav a:hover { color: var(--sine-red); }
.footer-bottom { border-top: 1px solid var(--structural-grey); padding-top: var(--space-6); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--scale-xs); color: #666; }

/* UTILS */
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }