/* Shared article layout and interactions for blog film posts. */

main{max-width:980px;overflow:visible}

.post-back{
    display:inline-block;
    margin-bottom:28px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    color:var(--light);
    text-decoration:none;
    transition:color .2s
}
.post-back:hover{color:var(--dark)}

.post-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    gap:28px;
    align-items:start
}
.post-main{min-width:0}
.post-side{position:sticky;top:56px;align-self:start;transform:translateX(18px)}
.title-wrap{margin-bottom:6px}
.post-title{font-size:26px;font-weight:700;color:var(--dark);line-height:1.35}
.post-meta{font-family:'Inter',sans-serif;font-size:13px;color:var(--light);margin-bottom:24px}
.post-meta span{margin:0 6px}

.side-cover{
    display:block;
    width:100%;
    border:1px solid #f0f0f0;
    background:#fff;
    cursor:zoom-in
}
.side-cover img{width:100%;display:block}
.side-cover .cover-cap{
    display:block;
    padding:10px 12px;
    border-top:1px solid var(--line);
    font-family:'Inter',sans-serif;
    font-size:12px;
    color:var(--light);
    line-height:1.5
}

.post p{margin-bottom:16px}
.post p:last-child{margin-bottom:0}
.post strong{font-weight:600;color:var(--dark)}
.post em{font-style:italic}
.post h2{font-size:20px;font-weight:700;margin:30px 0 12px;color:var(--dark);line-height:1.35}
.post h3{font-size:17px;font-weight:600;margin:22px 0 8px;color:var(--dark)}
.post blockquote{border-left:3px solid var(--line);padding-left:18px;color:var(--muted);font-style:italic;margin:20px 0}
.post ul,.post ol{padding-left:24px;margin-bottom:16px}
.post li{margin-bottom:4px}
.post hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.post a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.subheading{font-size:22px;font-weight:600;color:var(--dark);margin:34px 0 10px;line-height:1.4}
.inline-note{font-family:'Inter',sans-serif;font-size:12px;color:var(--light);margin:8px 0 20px;line-height:1.6}
.quote{margin:24px 0;padding-left:18px;border-left:2px solid var(--line);color:#4a4a4a;font-style:italic}

.spoiler-toggle{
    display:inline-block;
    margin:20px 0 4px;
    padding:8px 16px;
    border:1px solid var(--line);
    background:none;
    font-family:'Inter',sans-serif;
    font-size:13px;
    color:var(--muted);
    cursor:pointer;
    letter-spacing:.02em;
    transition:color .2s,border-color .2s
}
.spoiler-toggle:hover{color:var(--dark);border-color:var(--dark)}
.spoiler-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    border-left:2px solid var(--line);
    padding-left:20px;
    margin:0 0 20px;
    transition:max-height .5s,opacity .3s
}
.spoiler-content.open{max-height:5000px;opacity:1;margin-top:16px}
.spoiler-content p{margin-bottom:14px}

.score{
    display:inline-block;
    margin-top:24px;
    padding:6px 16px;
    border:1px solid var(--line);
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:500;
    color:var(--dark);
    letter-spacing:.02em
}
.closing{font-style:italic;color:var(--muted);margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}

.popup-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px)
}
.popup-panel{
    position:fixed;
    left:50%;
    top:50%;
    z-index:1001;
    width:min(680px,90vw);
    max-height:90vh;
    overflow:auto;
    transform:translate(-50%,-50%);
    background:var(--bg);
    box-shadow:0 10px 42px rgba(0,0,0,.18)
}
.popup-panel img{width:100%;display:block}
.popup-panel .popup-cap{
    padding:12px 14px;
    border-top:1px solid var(--line);
    font-family:'Inter',sans-serif;
    font-size:12px;
    color:var(--muted);
    line-height:1.5
}
.popup-x{
    position:absolute;
    top:10px;
    right:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border:0;
    background:rgba(0,0,0,.38);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    transition:background .2s
}
.popup-x:hover{background:rgba(0,0,0,.62)}
[hidden]{display:none !important}

@media(max-width:900px){
    .post-shell{grid-template-columns:1fr;gap:24px}
    .post-side{position:static;transform:none}
    .side-cover{max-width:320px}
}