*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.7;scroll-behavior:smooth}
body{background-color:#F7F6F4;color:#5A5650;font-family:'IBM Plex Sans',sans-serif;font-weight:400;overflow-x:hidden}

.spine-rule{position:fixed;top:0;left:25%;width:1px;height:0;background:#C0B8A8;z-index:10;transition:height 800ms ease-out}
.spine-rule.visible{height:100vh}

.layout{display:flex;min-height:100vh}

.gutter{position:fixed;top:0;left:0;width:25%;height:100vh;padding:32px 24px;display:flex;flex-direction:column;gap:40px;align-items:flex-end;z-index:5}
.gutter-label{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.8rem;color:#2A2824;letter-spacing:0.04em;opacity:0;transition:opacity 300ms ease-out}
.gutter-label.visible{opacity:1}

.botanical{opacity:0;transition:opacity 600ms ease-out}
.botanical.visible{opacity:1}

.content-area{margin-left:25%;padding:56px 48px 80px;max-width:720px}

.site-header{margin-bottom:64px}
.kanji-hero{display:flex;gap:16px;margin-bottom:24px}
.kanji-char{font-family:Georgia,'Times New Roman',serif;font-size:6rem;font-weight:400;color:#2A2824;opacity:0;transform:scale(0.95);transition:opacity 300ms ease-out,transform 300ms ease-out}
.kanji-char.visible{opacity:1;transform:scale(1)}
.header-subtitle{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.75rem;letter-spacing:0.1em;color:#8A8078;margin-bottom:16px;opacity:0;transition:opacity 400ms ease-out}
.header-subtitle.visible{opacity:1}
.header-description{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:0.95rem;color:#5A5650;max-width:500px;line-height:1.7;opacity:0;transition:opacity 400ms ease-out}
.header-description.visible{opacity:1}

.experiments{display:flex;flex-direction:column;gap:24px}

.experiment-card{opacity:0;transform:translateY(20px);transition:opacity 450ms ease-out,transform 450ms ease-out}
.experiment-card.visible{opacity:1;transform:translateY(0)}

.card-front{position:relative;background:#EDEBE8;border:1px solid #D8D0C4;border-radius:2px;padding:24px 24px 24px 28px;transition:box-shadow 200ms}
.card-front:hover{box-shadow:0 2px 12px rgba(42,40,36,0.08)}
.card-chrome-edge{position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#B87333,#C0B8A8);border-radius:2px 0 0 2px}

.card-number{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.65rem;letter-spacing:0.08em;color:#B87333;display:block;margin-bottom:8px}
.card-title{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem;color:#2A2824;margin-bottom:12px;line-height:1.4}
.card-desc{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:0.85rem;color:#5A5650;margin-bottom:16px;line-height:1.65}

.card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.meta-tag{font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:400;color:#8A8078;padding:2px 8px;border:1px solid #C0B8A8;border-radius:2px;letter-spacing:0.04em}
.meta-date{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:#8A8078;margin-left:auto}

.card-status{display:flex;align-items:center;gap:6px}
.status-dot{width:6px;height:6px;border-radius:50%}
.status-dot.active{background:#5E8C61}
.status-dot.dissolved{background:#C0B8A8}
.status-text{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:#8A8078;letter-spacing:0.06em}

.site-footer{margin-top:64px;padding-top:24px}
.footer-rule{height:1px;background:linear-gradient(to right,#C0B8A8,transparent);margin-bottom:16px}
.footer-text{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#8A8078;letter-spacing:0.04em}

@media(max-width:768px){
    .gutter{display:none}
    .spine-rule{display:none}
    .content-area{margin-left:0;padding:32px 20px 56px}
    .kanji-char{font-size:3.5rem}
}