/* ============================================================
   ronri.net — Bauhaus Logic Grid
   Colors: #1a1a1a #e0ddd5 #de3535 #f5c518 #1a5bc4 #f8f8f5
   Fonts: Staatliches, IBM Plex Sans, IBM Plex Mono
   ============================================================ */

/* === CSS Custom Properties === */
:root {
    --grid-black:   #1a1a1a;
    --canvas-white: #f8f8f5;
    --neutral-gray: #e0ddd5;
    --primary-red:  #de3535;
    --primary-blue: #1a5bc4;
    --primary-yellow: #f5c518;
    --border-width: 4px;
    --border:       var(--border-width) solid var(--grid-black);
}

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

html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--canvas-white);
    color: var(--grid-black);
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* === Typography === */
.display-title {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: 400;
    color: var(--grid-black);
}

.display-kanji {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--primary-red);
    margin: 0.25rem 0;
}

.display-subtitle {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    letter-spacing: 0.25em;
    font-weight: 400;
    color: var(--grid-black);
    opacity: 0.7;
}

.section-heading {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.1em;
    font-weight: 400;
    color: var(--grid-black);
    margin-bottom: 0.75rem;
}

.table-heading {
    font-family: 'Staatliches', sans-serif;
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.1em;
    font-weight: 400;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.body-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--grid-black);
}

.mono-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--grid-black);
    display: block;
}

/* === Main Container === */
#main-container {
    width: 100%;
}

/* === Composition Sections === */
.composition {
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    border-bottom: var(--border);
}

.composition-footer {
    min-height: 60vh;
}

/* === Mondrian Grid Base === */
.mondrian-grid {
    display: grid;
    width: 100%;
    min-height: 100vh;
}

.cell {
    border: var(--border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Negative margin trick so borders don't double up */
.cell {
    margin: -2px;
}

.mondrian-grid {
    gap: 0;
    border: var(--border);
}

/* === Cell Color Classes === */
.color-white   { background-color: var(--canvas-white); }
.color-red     { background-color: var(--primary-red); }
.color-blue    { background-color: var(--primary-blue); }
.color-yellow  { background-color: var(--primary-yellow); }
.color-neutral { background-color: var(--neutral-gray); }

/* === Cell Inner (padded content) === */
.cell-inner {
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================================
   COMPOSITION 1: HERO
   ============================================================ */
.grid-hero {
    grid-template-columns: 180px 1fr 1fr 120px;
    grid-template-rows: 60vh 20vh 20vh;
    min-height: 100vh;
}

/* Red tall block: col 1, rows 1-2 */
.cell-span-tall {
    grid-row: span 2;
}

/* Title cell: col 2-3, row 1 */
.cell-title {
    grid-column: span 2;
    align-items: flex-start;
}

.cell-title .cell-inner {
    justify-content: flex-end;
    padding-bottom: 2rem;
}

/* Hero yellow: col 4 */
/* Hero desc: col 2, row 2 */
.cell-desc {
    align-items: flex-start;
}

/* Blue tall: col 3, rows 2-3 */
/* Small yellow: row 3, col 1 */
.cell-small {
    min-height: 6rem;
}

/* Neutral label: row 3 */
.cell-label {
    flex-direction: column;
    gap: 0.25rem;
}

/* Navigation */
.site-nav {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--grid-black);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 150ms ease;
    width: fit-content;
}

.nav-link:hover {
    border-bottom-color: var(--primary-red);
}

/* ============================================================
   COMPOSITION 2: TRUTH TABLES
   ============================================================ */
.grid-truth {
    grid-template-columns: 1fr 1fr 1fr 160px;
    grid-template-rows: 200px 1fr 1fr 120px;
    min-height: 100vh;
}

.cell-section-label {
    grid-column: 1 / 3;
    align-items: flex-start;
}

.cell-section-label .cell-inner {
    justify-content: center;
}

.cell-truth-container {
    align-items: flex-start;
}

.cell-truth-container .cell-inner {
    justify-content: flex-start;
    padding-top: 1.25rem;
}

.cell-span-wide {
    grid-column: span 2;
}

.cell-not-container {
    align-items: flex-start;
}

.cell-not-container .cell-inner {
    justify-content: flex-start;
    padding-top: 1.25rem;
}

.cell-legend {
    grid-column: span 1;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 1.5rem;
}

/* === Truth Tables === */
.truth-table {
    width: 100%;
    border: var(--border);
    border-collapse: collapse;
}

.tt-header,
.tt-row {
    display: grid;
    width: 100%;
}

/* 3-col tables */
#and-table .tt-header,
#and-table .tt-row,
#or-table .tt-header,
#or-table .tt-row,
#xor-table .tt-header,
#xor-table .tt-row {
    grid-template-columns: 1fr 1fr 1fr;
}

/* 2-col tables */
#not-table .tt-header,
#not-table .tt-row {
    grid-template-columns: 1fr 1fr;
}

.tt-cell {
    border: 2px solid var(--grid-black);
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 400;
    background-color: var(--neutral-gray);
    color: var(--grid-black);
    cursor: default;
    user-select: none;
}

.tt-head {
    background-color: var(--grid-black);
    color: var(--canvas-white);
    font-weight: 600;
}

.tt-data {
    cursor: pointer;
    background-color: var(--neutral-gray);
    border: none;
    width: 100%;
    height: 100%;
    transition: background-color 150ms ease;
}

.tt-data[data-value="T"] {
    background-color: var(--primary-yellow);
    color: var(--grid-black);
}

.tt-data[data-value="F"] {
    background-color: var(--primary-red);
    color: var(--canvas-white);
}

.tt-result {
    cursor: default;
}

.tt-result[data-val="T"] {
    background-color: var(--primary-yellow);
    color: var(--grid-black);
}

.tt-result[data-val="F"] {
    background-color: var(--primary-red);
    color: var(--canvas-white);
}

@media (prefers-reduced-motion: reduce) {
    .tt-data { transition: none; }
}

/* ============================================================
   COMPOSITION 3: LOGIC GATES
   ============================================================ */
.grid-gates {
    grid-template-columns: 120px 1fr 1fr 1fr;
    grid-template-rows: 180px 1fr 1fr 100px;
    min-height: 100vh;
}

.cell-gates-accent {
    grid-row: span 1;
}

.cell-gate-panel {
    align-items: flex-start;
    min-height: 200px;
}

.cell-gate-panel .cell-inner {
    justify-content: flex-start;
    padding: 1.25rem;
    gap: 0.75rem;
}

.cell-gates-tall {
    grid-row: span 2;
    grid-column: 1;
}

.cell-gates-small {
    min-height: 80px;
}

/* === Gate SVG === */
.gate-svg-wrapper {
    width: 100%;
    border: 2px solid var(--grid-black);
    background-color: var(--canvas-white);
}

.gate-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* === Gate Controls === */
.gate-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gate-input-row {
    display: flex;
    gap: 0.5rem;
}

.gate-toggle {
    flex: 1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--grid-black);
    background-color: var(--neutral-gray);
    color: var(--grid-black);
    cursor: pointer;
    transition: background-color 150ms ease;
    letter-spacing: 0.05em;
}

.gate-toggle.active-1 {
    background-color: var(--primary-yellow);
    color: var(--grid-black);
}

.gate-toggle.active-0 {
    background-color: var(--neutral-gray);
    color: var(--grid-black);
}

.gate-output {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 2px solid var(--grid-black);
}

.gate-result {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--grid-black);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--grid-black);
    background-color: var(--neutral-gray);
    transition: background-color 150ms ease;
}

.gate-result.result-1 {
    background-color: var(--primary-yellow);
    color: var(--grid-black);
}

.gate-result.result-0 {
    background-color: var(--primary-red);
    color: var(--canvas-white);
}

@media (prefers-reduced-motion: reduce) {
    .gate-toggle,
    .gate-result { transition: none; }
}

/* ============================================================
   COMPOSITION 4: VENN DIAGRAMS
   ============================================================ */
.grid-venn {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 160px 1fr 1fr;
    min-height: 100vh;
}

.cell-venn-accent-top {
    grid-column: 1;
    grid-row: 1;
}

.cell-section-label {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
}

.cell-venn-accent-right {
    grid-column: 3;
    grid-row: 1;
}

.cell-venn-main {
    grid-column: 2;
    grid-row: 2 / 4;
    align-items: flex-start;
}

.cell-venn-main .cell-inner {
    padding: 1.5rem;
    justify-content: flex-start;
    gap: 1rem;
}

.cell-venn-accent-bottom {
    grid-column: 3;
    grid-row: 2 / 4;
}

.cell-syllogism {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
}

.cell-syllogism .cell-inner {
    justify-content: flex-start;
    padding: 1.25rem;
}

.cell-venn-neutral {
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    justify-content: center;
}

.cell-vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    letter-spacing: 0.2em;
    font-size: 0.75rem;
}

/* Venn Laws goes after venn - but no explicit position in 3-col grid */
/* laws cell goes in col 3 (we actually have a 4-col scenario) */
/* let's adjust grid to 4 cols */

/* Overriding to 4-column layout for venn section */
.grid-venn {
    grid-template-columns: 160px 1fr 1fr 120px;
    grid-template-rows: 160px 1fr 200px;
    min-height: 100vh;
}

.cell-venn-accent-top {
    grid-column: 1;
    grid-row: 1;
}

.cell-section-label:not(.grid-truth .cell-section-label):not(.grid-gates .cell-section-label) {
    /* scoped to venn */
    grid-column: 2 / 4;
    grid-row: 1;
}

/* Instead of scoping, use direct ID approach: use a wrapper class for venn */
/* Simplify: just define all cells for grid-venn explicitly using nth-child or class names */

.grid-venn .cell-venn-accent-top {
    grid-column: 1;
    grid-row: 1;
}

.grid-venn .cell-section-label {
    grid-column: 2 / 4;
    grid-row: 1;
}

.grid-venn .cell-venn-accent-right {
    grid-column: 4;
    grid-row: 1;
}

.grid-venn .cell-venn-main {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

.grid-venn .cell-venn-accent-bottom {
    grid-column: 4;
    grid-row: 2;
}

.grid-venn .cell-syllogism {
    grid-column: 1;
    grid-row: 2;
}

.grid-venn .cell-venn-neutral {
    grid-column: 1;
    grid-row: 3;
}

.grid-venn .cell-laws {
    grid-column: 4;
    grid-row: 3;
}

/* === Venn Diagram === */
.venn-wrapper {
    gap: 1rem;
}

.venn-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    border: 2px solid var(--grid-black);
}

.venn-region {
    transition: fill 150ms ease;
}

.venn-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.venn-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--grid-black);
    background-color: var(--canvas-white);
    color: var(--grid-black);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.venn-btn:hover {
    background-color: var(--neutral-gray);
}

.venn-btn.active {
    background-color: var(--primary-yellow);
    color: var(--grid-black);
}

.venn-label {
    padding: 0.5rem 0;
    border-top: 2px solid var(--grid-black);
    min-height: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    .venn-region,
    .venn-btn { transition: none; }
}

/* === Syllogism === */
.syllogism-block {
    margin-bottom: 0.75rem;
    border: 2px solid var(--grid-black);
    padding: 0.75rem;
}

.syllogism-line {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.premise-label {
    min-width: 2rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline;
}

.syllogism-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

.syllogism-divider {
    height: 2px;
    background-color: var(--grid-black);
    margin: 0.25rem 0;
}

.conclusion-line {
    font-weight: 600;
}

.syllogism-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.8;
}

/* === Laws Grid === */
.cell-laws .cell-inner {
    justify-content: flex-start;
    padding: 1rem;
    gap: 0.5rem;
    overflow: auto;
}

.laws-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.law-item {
    border: 2px solid var(--grid-black);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.law-name {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--grid-black);
    opacity: 0.7;
}

.law-formula {
    font-size: 0.75rem;
    color: var(--grid-black);
}

/* ============================================================
   COMPOSITION 5: FOOTER
   ============================================================ */
.grid-footer {
    grid-template-columns: 1fr 2fr 100px;
    grid-template-rows: 1fr 1fr 80px;
    min-height: 60vh;
}

.cell-footer-large {
    grid-column: 1;
    grid-row: 1 / 3;
}

.cell-footer-info {
    grid-column: 2;
    grid-row: 1 / 3;
    align-items: flex-start;
}

.cell-footer-info .cell-inner {
    gap: 0.75rem;
}

.footer-desc {
    font-size: 0.875rem;
    opacity: 0.8;
    max-width: 36rem;
}

.cell-footer-blue {
    grid-column: 3;
    grid-row: 1;
}

.cell-footer-red {
    grid-column: 3;
    grid-row: 2;
}

.cell-footer-credits {
    grid-column: 1;
    grid-row: 3;
    align-items: flex-start;
}

.cell-footer-credits .cell-inner {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
}

.credits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.credits-list li {
    font-size: 0.7rem;
}

.cell-footer-nav {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-start;
}

.cell-footer-nav .cell-inner {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
}

.footer-nav-title {
    display: inline;
    font-weight: 600;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cell-footer-small-r,
.cell-footer-small-y {
    grid-column: 3;
    min-height: 2rem;
}

.cell-footer-small-r {
    grid-row: 3;
    grid-column: 3;
}

/* ============================================================
   RESPONSIVE — Mobile (<768px)
   ============================================================ */
@media (max-width: 767px) {
    .grid-hero {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto;
    }

    .cell-span-tall {
        grid-row: span 1;
        min-height: 40px;
    }

    .cell-title {
        grid-column: 2;
    }

    .cell-desc {
        grid-column: 1 / 3;
    }

    .grid-truth {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .cell-section-label {
        grid-column: 1 / 3;
    }

    .cell-truth-container {
        grid-column: span 1;
    }

    .cell-span-wide {
        grid-column: 1 / 3;
        min-height: 60px;
    }

    .grid-gates {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .grid-gates .cell-section-label {
        grid-column: 1 / 3;
    }

    .cell-gate-panel {
        grid-column: span 1;
    }

    .grid-venn {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .grid-venn .cell-section-label,
    .grid-venn .cell-venn-main {
        grid-column: 1 / 3;
    }

    .grid-footer {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .cell-footer-info {
        grid-column: 1 / 3;
        grid-row: auto;
    }
}