/* riron.xyz - Avant-Garde Experimental Theory */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --raw-paper: #F0EDE5;
    --warm-paper: #E8E4DA;
    --ink-black: #0A0A0A;
    --mid-gray: #6A6A6A;
    --warm-gray: #8A8078;
    --provocation-red: #C80000;
}
body {
    background: var(--raw-paper);
    color: var(--ink-black);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

/* Experimental Sections */
.exp-section {
    position: relative;
    min-height: 100vh;
    padding: 6rem 4rem;
    overflow: hidden;
}

/* Giant Typography */
.giant-kanji {
    font-size: clamp(6rem, 30vw, 20rem);
    font-weight: 700;
    color: var(--ink-black);
    line-height: 0.85;
    position: relative;
    z-index: 1;
}
.ghost-layer {
    font-size: clamp(4rem, 20vw, 16rem);
    font-weight: 700;
    color: var(--ink-black);
    opacity: 0.06;
    position: absolute;
    top: 35%;
    left: 5%;
    z-index: 0;
    letter-spacing: 0.05em;
}
.ghost-layer.thin {
    font-weight: 400;
    opacity: 0.04;
    top: 20%;
    left: 10%;
}

.mega-word {
    font-size: clamp(4rem, 20vw, 16rem);
    font-weight: 700;
    color: var(--ink-black);
    line-height: 0.9;
    position: relative;
    z-index: 1;
}
.offset-right {
    text-align: right;
}

/* Flow Text */
.flow-text {
    max-width: 420px;
    position: relative;
    z-index: 2;
    margin-top: 3rem;
}
.flow-text.left-align {
    margin-left: 0;
}
.flow-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--mid-gray);
}

/* Rotated Text Block */
.rotated-block {
    position: absolute;
    right: 4rem;
    top: 50%;
    transform: rotate(90deg) translateX(-50%);
    transform-origin: right center;
    max-width: 300px;
    z-index: 2;
}
.rotated-block p {
    font-size: 0.8rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--warm-gray);
}

/* Accent Mark */
.accent-mark {
    position: absolute;
    bottom: 4rem;
    right: 4rem;
    font-size: 3rem;
    color: var(--ink-black);
    opacity: 0.2;
}

/* Provocation Red */
.provocation-red {
    display: block;
    margin-top: 3rem;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--provocation-red);
    font-style: italic;
}

/* Footer */
#footer {
    padding: 6rem 4rem 4rem;
}
.footer-text {
    font-size: 0.8rem;
    color: var(--warm-gray);
    opacity: 0.3;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .exp-section { padding: 4rem 2rem; }
    .rotated-block {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        margin-top: 2rem;
    }
    .accent-mark { right: 2rem; bottom: 2rem; }
}