/* masugomi.com -- anti-design deconstructed newspaper */
/* Palette: #0A0A0A newsprint black, #1A1816 darkroom, #F2EDE4 worn newsprint, #8A8278 faded ink, #D4252B correction red, #2B4A8C headline blue, #F0C040 highlighter, #3A3632 column rule */

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

:root{
    --black:#0A0A0A;
    --darkroom:#1A1816;
    --newsprint:#F2EDE4;
    --faded:#8A8278;
    --red:#D4252B;
    --blue:#2B4A8C;
    --highlight:#F0C040;
    --rule:#3A3632;
}

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

body{
    background:var(--black);
    color:var(--newsprint);
    font-family:'Inconsolata',monospace;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1.05rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Top banner */
.top-banner{
    position:fixed;
    top:0;left:0;right:0;
    height:28px;
    background:var(--red);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 1.5rem;
    z-index:1000;
}

.banner-text{
    font-family:'Inconsolata',monospace;
    font-size:0.7rem;
    letter-spacing:0.05em;
    color:var(--newsprint);
}

.retract-link{
    font-family:'Inconsolata',monospace;
    font-size:0.7rem;
    letter-spacing:0.05em;
    color:var(--newsprint);
    text-decoration:none;
}

.retract-link:hover{text-decoration:underline}

/* Kanji watermark */
.kanji-watermark{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-family:'Noto Sans JP',sans-serif;
    font-weight:900;
    font-size:30vw;
    color:var(--newsprint);
    opacity:0.03;
    pointer-events:none;
    z-index:0;
    user-select:none;
}

/* Section kanji bg marks */
.kanji-bg-mark{
    position:absolute;
    font-family:'Noto Sans JP',sans-serif;
    font-weight:900;
    font-size:20vw;
    color:var(--newsprint);
    opacity:0.025;
    pointer-events:none;
    user-select:none;
    top:20%;right:5%;
    z-index:0;
}

/* Stamps */
.stamp{position:absolute;pointer-events:none}
.stamp svg{width:100%;height:auto}

.stamp-1{
    top:8%;right:8%;
    width:clamp(80px,12vw,140px);
    opacity:0.1;
    transform:rotate(12deg);
}

.stamp-scattered{
    top:15%;left:5%;
    width:clamp(60px,8vw,100px);
    opacity:0.25;
    transform:rotate(-8deg);
}

.stamp-large{
    position:relative;
    width:clamp(150px,25vw,300px);
    opacity:0.3;
    margin:0 auto 2rem;
}

/* Sections */
.section{
    position:relative;
    z-index:2;
    padding:clamp(3rem,6vw,6rem) clamp(1.5rem,3vw,3rem);
    padding-top:clamp(4rem,7vw,7rem);
}

/* Section 1: Masthead */
.section-masthead{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:60px;
}

.masthead-title{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,10vw,8rem);
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--newsprint);
    line-height:1;
    animation:stampIn 0.8s ease-out forwards;
}

.masthead-dot{
    font-size:0.3em;
    vertical-align:bottom;
    font-family:'Inconsolata',monospace;
}

@keyframes stampIn{
    from{transform:scale(1.02);opacity:0.8}
    to{transform:scale(1);opacity:1}
}

.masthead-sub{
    font-family:'Inconsolata',monospace;
    font-weight:700;
    font-size:clamp(0.85rem,1.2vw,1.1rem);
    color:var(--newsprint);
    margin-top:1rem;
}

/* Ticker */
.ticker{
    overflow:hidden;
    background:rgba(255,255,255,0.03);
    padding:0.5rem 0;
    margin-top:2rem;
}

.ticker-track{
    display:flex;
    gap:2rem;
    white-space:nowrap;
    animation:tickerScroll 40s linear infinite;
    font-family:'Inconsolata',monospace;
    font-weight:400;
    font-size:0.8rem;
    color:var(--faded);
    letter-spacing:0.02em;
}

.ticker-sep{color:var(--red);margin:0 0.5rem}

@keyframes tickerScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Tear lines */
.tear-line{
    position:relative;
    z-index:2;
    padding:0.5rem 0;
}

.tear-line svg{
    width:100%;height:30px;
    display:block;
}

/* Section 2: Front Page */
.masonry-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:8px;
    max-width:1200px;
    margin:0 auto;
}

.masonry-block{
    border-top:3px solid var(--black);
    padding:clamp(1rem,2vw,2rem);
    opacity:0;
    transition:opacity 0.4s ease-out;
}

.masonry-block.revealed{opacity:1}

.mb-wide{grid-column:span 5}
.mb-standard{grid-column:span 4}
.mb-narrow{grid-column:span 3}

.block-headline{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:clamp(1.4rem,3vw,2.5rem);
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--newsprint);
    margin-bottom:0.5rem;
    line-height:1.1;
}

.block-body{
    font-family:'Inconsolata',monospace;
    font-weight:400;
    line-height:1.65;
    color:var(--newsprint);
    margin-bottom:0.5rem;
}

.block-body mark{
    background:var(--highlight);
    color:var(--black);
    padding:0 2px;
}

.block-time{
    font-family:'Inconsolata',monospace;
    font-size:0.75rem;
    color:var(--faded);
}

/* Redacted block */
.redacted-block{
    position:relative;
    min-height:120px;
}

.redaction-bar{
    position:absolute;
    left:1rem;right:1rem;
    height:16px;
    background:var(--newsprint);
    top:55%;
}

.rb-2{top:70%}

/* Section 3: Editorial */
.section-editorial{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.editorial-quote{
    max-width:700px;
    border-left:6px solid var(--red);
    padding:2rem 3rem;
    opacity:0;
    transition:opacity 0.6s ease-out;
}

.editorial-quote.revealed{opacity:1}

.quote-text{
    font-family:'Inconsolata',monospace;
    font-weight:700;
    font-size:clamp(1.3rem,2.5vw,2rem);
    line-height:1.5;
    color:var(--newsprint);
}

/* Section 4: Classified */
.section-classified{
    background:var(--darkroom);
}

.classified-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:4px;
    max-width:1000px;
    margin:0 auto;
}

.classified-block{
    background:var(--darkroom);
    border-top:2px solid var(--rule);
    padding:clamp(0.75rem,1.5vw,1.25rem);
    opacity:0;
    transition:opacity 0.4s ease-out;
}

.classified-block.revealed{opacity:1}

.cb-head{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:0.9rem;
    letter-spacing:0.05em;
    color:var(--red);
    margin-bottom:0.25rem;
}

.cb-text{
    font-family:'Inconsolata',monospace;
    font-size:0.8rem;
    line-height:1.5;
    color:var(--faded);
}

/* Shake effect for classified blocks */
.classified-block.shake{
    animation:shakeError 0.2s ease 1;
}

@keyframes shakeError{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-2px)}
    75%{transform:translateX(2px)}
}

/* Section 5: Retraction */
.section-retraction{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--darkroom);
}

.retraction-text{
    font-family:'Inconsolata',monospace;
    font-weight:400;
    font-size:0.85rem;
    color:var(--faded);
    max-width:400px;
    margin-bottom:2rem;
}

.retraction-domain{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    font-size:2rem;
    letter-spacing:0.05em;
    color:var(--newsprint);
}

.retraction-time{
    font-family:'Inconsolata',monospace;
    font-size:0.75rem;
    color:var(--faded);
    margin-top:0.5rem;
}

/* Responsive */
@media(max-width:768px){
    .masonry-grid{grid-template-columns:1fr}
    .mb-wide,.mb-standard,.mb-narrow{grid-column:1}
    .classified-grid{grid-template-columns:1fr 1fr}
    .stamp-1{display:none}
    .kanji-watermark{font-size:50vw}
}

@media(prefers-reduced-motion:reduce){
    .masthead-title{animation:none;opacity:1;transform:none}
    .ticker-track{animation:none}
    .masonry-block,.editorial-quote,.classified-block{opacity:1;transition:none}
    .classified-block.shake{animation:none}
}