/* miris.day -- minimalist broken-grid daily chronicle */

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

:root{
    --linen:#FAF6F0;
    --honey:#F5EDE0;
    --wheat:#D4B078;
    --amber:#B8945C;
    --clay:#C8A880;
    --charcoal:#3A3530;
    --muted:#8A7E70;
    --whisper:#E0D0B8;
    --fish:#C0986C;
    --pulse:#D4B078;
}

body{
    background:var(--linen);
    color:var(--charcoal);
    font-family:'EB Garamond','Georgia',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.05vw,1.08rem);
    line-height:1.85;
    letter-spacing:0.005em;
    overflow-x:hidden;
}

/* Navigation dot */
.nav-dot{
    position:fixed;
    top:1.5rem;
    right:1.5rem;
    width:20px;
    height:20px;
    border:none;
    background:none;
    cursor:pointer;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.dot-inner{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--amber);
    transition:transform 0.3s ease;
}

.nav-dot:hover .dot-inner{
    transform:scale(2);
}

.nav-overlay{
    position:fixed;
    top:0;
    right:-200px;
    width:180px;
    height:auto;
    padding:3rem 1.5rem;
    background:var(--linen);
    border-left:1px solid var(--whisper);
    z-index:190;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:right 0.4s cubic-bezier(0.16,1,0.3,1);
}

.nav-overlay.open{
    right:0;
}

.nav-item{
    font-family:'Cormorant',serif;
    font-weight:400;
    font-size:0.9rem;
    color:var(--charcoal);
    text-decoration:none;
    transition:color 0.25s ease;
}

.nav-item:hover{
    color:var(--amber);
}

/* Sections */
.section{
    position:relative;
    padding:0 24px;
    max-width:900px;
    margin:0 auto;
}

/* Morning */
.morning{
    min-height:100vh;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    align-content:center;
}

.morning-grid{
    grid-column:2/4;
    align-self:center;
    margin-top:-10vh;
}

.morning-title{
    font-family:'Cormorant',serif;
    font-weight:300;
    font-size:clamp(2rem,3.5vw,3.5rem);
    letter-spacing:0.06em;
    color:var(--charcoal);
    line-height:1.3;
}

.morning-sub{
    font-family:'Cormorant',serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.2rem);
    color:var(--muted);
    letter-spacing:0.12em;
    margin-top:0.5rem;
}

.morning-line{
    position:absolute;
    top:45%;
    right:0;
    width:60%;
    height:1px;
    background:var(--wheat);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s ease 2.2s;
}

.morning.loaded .morning-line{
    transform:scaleX(1);
}

.fish-betta{
    position:absolute;
    bottom:20%;
    right:15%;
    width:80px;
    opacity:0.7;
}

/* Skeleton loading */
.skeleton-block{
    position:relative;
}

.skeleton-block::before{
    content:'';
    position:absolute;
    inset:0;
    border:1px solid var(--pulse);
    border-radius:2px;
    opacity:0;
    animation:skeleton-pulse 1.5s ease-in-out 2;
    pointer-events:none;
}

.skeleton-block>*{
    opacity:0;
    transition:opacity 0.6s ease-out;
}

.skeleton-block.sk-loaded::before{
    display:none;
}

.skeleton-block.sk-loaded>*{
    opacity:1;
}

@keyframes skeleton-pulse{
    0%,100%{opacity:0.3}
    50%{opacity:0.6}
}

/* Hours section */
.hours{
    padding-top:8vh;
    padding-bottom:8vh;
}

.hours-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    position:relative;
}

.entry{
    padding:1.5rem 0;
}

.entry-date{
    font-family:'Karla',sans-serif;
    font-weight:400;
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
    margin-bottom:0.5rem;
}

.entry-title{
    font-family:'Cormorant',serif;
    font-weight:500;
    font-size:clamp(1.1rem,1.5vw,1.4rem);
    color:var(--charcoal);
    line-height:1.3;
    margin-bottom:0.75rem;
}

.entry-body{
    color:var(--charcoal);
}

.entry-1{grid-column:1/4;margin-left:10px}
.entry-2{grid-column:3/6;margin-top:-40px}
.entry-3{grid-column:2/5}
.entry-4{grid-column:1/4;margin-left:30px}
.entry-5{grid-column:3/6}

/* Mixed media */
.mixed-media{
    position:relative;
    grid-column:5/7;
    align-self:center;
}

.media-1{grid-row:1}
.media-2{grid-row:4}

.media-rect{
    width:50px;
    height:70px;
    border-radius:2px;
    transform:rotate(3deg);
}

.rect-warm{background:rgba(212,176,120,0.2)}
.rect-clay{background:rgba(200,168,128,0.25)}

.media-line{
    width:60px;
    position:absolute;
    top:-10px;
    left:30px;
    opacity:0.5;
}

.media-photo{
    width:40px;
    height:55px;
    background:var(--clay);
    clip-path:polygon(0 0,95% 5%,100% 100%,3% 97%);
    position:absolute;
    top:40px;
    left:25px;
    opacity:0.3;
}

/* Fish */
.fish{
    pointer-events:none;
}

.fish-guppy{
    position:absolute;
    width:40px;
    top:30%;
    right:8%;
    opacity:0.5;
}

.fish-guppy-2{
    position:absolute;
    width:40px;
    bottom:15%;
    left:5%;
    opacity:0.4;
}

.fish-drift{
    animation:fish-swim 10s ease-in-out infinite;
}

@keyframes fish-swim{
    0%,100%{transform:translateY(0) translateX(0)}
    25%{transform:translateY(-3px) translateX(2px)}
    50%{transform:translateY(0) translateX(5px)}
    75%{transform:translateY(3px) translateX(2px)}
}

.fish-drift-sm{
    position:absolute;
    width:40px;
    opacity:0.4;
}

/* Structural lines on entries */
.entry::after{
    content:'';
    position:absolute;
    right:0;
    height:1px;
    background:rgba(224,208,184,0.5);
    width:0;
    transition:width 1s ease 0.3s;
}

.entry.revealed::after{
    width:calc(100vw - 100%);
}

/* Drift section */
.drift{
    min-height:60vh;
    padding-top:10vh;
    padding-bottom:10vh;
}

.drift-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    position:relative;
}

.drift-block{
    grid-column:2/6;
    padding:48px 0;
}

.drift-text{
    font-family:'EB Garamond',serif;
    font-size:clamp(1rem,1.1vw,1.1rem);
    line-height:1.9;
    color:var(--charcoal);
}

.kr-text{
    font-family:'Noto Serif KR',serif;
    font-weight:500;
}

.drift-line-extend{
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:1px;
    background:rgba(224,208,184,0.5);
    transition:width 1.2s ease;
}

.drift.in-view .drift-line-extend{
    width:calc(100vw - 70%);
}

/* Evening section */
.evening{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 24px;
    background:linear-gradient(to bottom,var(--linen),var(--honey));
}

.evening-content{
    position:relative;
    text-align:center;
    margin-left:-8px;
}

.evening-statement{
    font-family:'Cormorant',serif;
    font-weight:500;
    font-size:clamp(1.4rem,2vw,2rem);
    color:var(--charcoal);
    letter-spacing:0.06em;
    line-height:1.3;
}

.evening-line-left,
.evening-line-right{
    position:absolute;
    top:50%;
    height:1px;
    background:var(--wheat);
    width:0;
    transition:width 1.5s ease;
}

.evening-line-left{
    right:calc(100% + 2rem);
    transform-origin:right;
}

.evening-line-right{
    left:calc(100% + 2rem);
    transform-origin:left;
}

.evening.in-view .evening-line-left{width:30vw}
.evening.in-view .evening-line-right{width:30vw}

.fish-angel{
    position:absolute;
    bottom:15%;
    right:10%;
    width:100px;
    opacity:0.5;
}

/* Responsive */
@media(max-width:768px){
    .morning{
        grid-template-columns:1fr;
    }
    .morning-grid{
        grid-column:1;
        margin-top:0;
        text-align:center;
    }
    .morning-line{display:none}
    .hours-grid{
        grid-template-columns:1fr;
    }
    .entry-1,.entry-2,.entry-3,.entry-4,.entry-5{
        grid-column:1;
        margin-left:0;
        margin-top:0;
    }
    .mixed-media{
        grid-column:1;
        display:none;
    }
    .drift-grid{
        grid-template-columns:1fr;
    }
    .drift-block{
        grid-column:1;
        padding:24px 0;
    }
    .fish-betta,.fish-angel{
        display:none;
    }
    .nav-overlay{width:100%;right:-100%}
}

@media(prefers-reduced-motion:reduce){
    .skeleton-block::before{animation:none;opacity:0}
    .skeleton-block>*{opacity:1;transition:none}
    .fish-drift{animation:none}
    .morning-line,.evening-line-left,.evening-line-right,
    .drift-line-extend,.entry::after{
        width:auto !important;
        transform:none !important;
        transition:none !important;
    }
}