/* kaigenrei.com -- documentary-noir martial law archive */

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

:root{
    --linen:#F4EDE4;
    --iron-gall:#3A3228;
    --brass:#C4A87C;
    --stamp-red:#8B3A3A;
    --umber:#5A4A3A;
    --foxing:#D9CFC2;
    --gold:#A89272;
    --sumi:#2A2420;
    --spine:#8C7A6B;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--linen);
    color:var(--iron-gall);
    font-family:'Source Serif 4',Georgia,serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.2rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Grain overlay */
.grain-overlay{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:0.04;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:150px;
}

/* Hero */
.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:2rem;
}

.stamp-impression{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--stamp-red);
    transform:rotate(-12deg);
    letter-spacing:0.04em;
    opacity:0.85;
    filter:url(#stamp-filter);
    border:3px solid var(--stamp-red);
    padding:0.2em 0.5em;
    position:relative;
}

.kanji-vertical{
    font-family:'Playfair Display',serif;
    font-size:clamp(4rem,12vw,10rem);
    color:var(--iron-gall);
    writing-mode:vertical-rl;
    letter-spacing:0.2em;
    margin-top:2rem;
    opacity:0.9;
}

/* Timeline */
.timeline-container{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    padding:4rem 2rem 6rem;
}

.timeline-spine{
    position:absolute;
    left:38.2%;
    top:0;
    width:1px;
    height:100%;
    background:var(--spine);
}

/* Timeline nodes */
.timeline-node{
    position:relative;
    margin-bottom:6rem;
    max-width:45%;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.timeline-node.visible{
    opacity:1;
    transform:translateY(0);
}

.node-left{
    margin-left:0;
    margin-right:auto;
    padding-right:4rem;
}

.node-right{
    margin-left:auto;
    margin-right:0;
    padding-left:4rem;
}

.node-pip{
    position:absolute;
    width:12px;height:12px;
    border-radius:50%;
    background:var(--brass);
    border:2px solid var(--umber);
}

.node-left .node-pip{right:-6px;top:0.5rem;left:auto}
.node-right .node-pip{left:-6px;top:0.5rem;right:auto}

.node-connector{
    position:absolute;
    top:calc(0.5rem + 5px);
    height:1px;
    background:var(--brass);
    width:3rem;
}

.node-left .node-connector{right:-3rem}
.node-right .node-connector{left:-3rem}

.filing-tab{
    display:inline-block;
    background:var(--foxing);
    padding:0.15rem 0.6rem;
    margin-bottom:0.75rem;
    clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);
}

.tab-num{
    font-family:'Commissioner',sans-serif;
    font-weight:500;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--umber);
}

.node-content{
    border-left:3px solid var(--brass);
    padding-left:16px;
    position:relative;
    overflow:hidden;
}

.node-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.4rem,3vw,2.2rem);
    color:var(--iron-gall);
    letter-spacing:0.04em;
    line-height:1.15;
    margin-bottom:0.75rem;
}

.node-text{
    color:var(--iron-gall);
    line-height:1.75;
}

.node-date{
    font-family:'Commissioner',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--spine);
    display:block;
    margin-top:1rem;
}

/* Kanji watermarks */
.kanji-watermark{
    position:absolute;
    top:-10%;right:-10%;
    font-size:clamp(10rem,25vw,18rem);
    color:var(--brass);
    opacity:0.04;
    font-family:'Playfair Display',serif;
    pointer-events:none;
    line-height:1;
}

/* Redaction */
.redacted{
    background:var(--sumi);
    color:var(--sumi);
    padding:0 0.3em;
    cursor:pointer;
    transition:opacity 0.8s ease;
    font-family:'Source Serif 4',serif;
}

.redacted.revealed{
    background:transparent;
    color:var(--stamp-red);
}

.redaction-block{
    margin-top:1rem;
    font-size:0.95rem;
}

/* Telegraph divider */
.telegraph-divider{
    height:1px;
    background:var(--spine);
    margin:0 auto 3rem;
    max-width:60%;
    position:relative;
}

.telegraph-divider::before,
.telegraph-divider::after{
    content:'';
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    border:1px solid var(--spine);
    top:-3px;
}

.telegraph-divider::before{left:20%}
.telegraph-divider::after{right:20%}

/* Seal */
.seal-section{
    display:flex;
    justify-content:center;
    padding:3rem 0;
}

.seal-svg{
    width:clamp(80px,15vw,120px);
    height:auto;
    opacity:0;
    transition:opacity 1s ease;
}

.seal-svg.visible{opacity:1}

/* Colophon */
.colophon{
    padding:2rem;
    text-align:center;
}

.colophon-rule{
    border:none;
    border-top:1px solid var(--brass);
    max-width:200px;
    margin:0 auto 1rem;
}

.colophon-text{
    font-family:'Commissioner',sans-serif;
    font-weight:300;
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--spine);
}

/* Responsive */
@media(max-width:768px){
    .timeline-spine{left:1.5rem}
    .timeline-node{max-width:100%;padding-left:3rem;padding-right:0}
    .node-left{margin-right:0;padding-right:0;padding-left:3rem}
    .node-right{margin-left:0;padding-left:3rem}
    .node-left .node-pip,.node-right .node-pip{left:-6px;right:auto}
    .node-left .node-connector,.node-right .node-connector{left:-2rem;right:auto;width:2rem}
    .kanji-vertical{font-size:3rem;writing-mode:horizontal-tb}
}

@media(prefers-reduced-motion:reduce){
    .timeline-node{opacity:1;transform:none;transition:none}
    .seal-svg{opacity:1;transition:none}
}