.page-article main > .inner{
    width:min(100% - 40px, 860px);
    margin-inline:auto;
    padding-block:10px clamp(64px, 9vw, 120px);
}

.page-article #breadcrumb{
    margin-bottom:clamp(26px, 4vw, 42px);
    color:#777;
    font-size:12px;
    line-height:1.7;
}

.page-article .meta{
    margin:0 0 clamp(30px, 4vw, 42px);
    gap:0;
    color:#666;
    font-size:12px;
}

.page-article .meta .date,
.page-article .meta .catlink{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.page-article .meta .catlink{
    margin-left:18px;
    padding-left:18px;
    border:0;
    border-left:1px solid #D8D8D8;
    border-radius:0;
    color:#666;
}

.page-article .meta .catlink:hover{
    color:#202020;
    text-decoration:underline;
    text-underline-offset:4px;
}

.page-article .meta svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}

#article > h1{
    margin:0 0 14px;
    font-size:clamp(28px, 4vw, 42px);
    font-weight:650;
    line-height:1.38;
    letter-spacing:-.018em;
}

#article > .tags{
    margin:calc(-1 * clamp(18px, 2vw, 26px)) 0 clamp(34px, 5vw, 52px);
    gap:8px;
}

#article > .tags span{
    padding:.3em .85em;
    border-color:#DDD;
    border-radius:999px;
    color:#666;
    font-size:11px;
}

#article .body{
    color:#292929;
    font-size:clamp(16px, 1.35vw, 18px);
    font-weight:400;
    line-height:2.15;
    letter-spacing:.025em;
    overflow-wrap:anywhere;
}

#article .body p{
    margin:0 0 1.75em;
    font-size:inherit;
    line-height:inherit;
}

#article .body h2{
    margin:1.15em 0;
    font-size:clamp(23px, 3vw, 31px);
    font-weight:650;
    line-height:1.45;
    letter-spacing:-.015em;
}

#article .body h3{
    margin:2.6em 0 1em;
    font-size:clamp(19px, 2.3vw, 24px);
    font-weight:650;
    line-height:1.55;
}

#article .body ul,
#article .body ol{
    margin:0 0 2em 1.4em;
}

#article .body li{
    margin:.45em 0;
}

#article .body blockquote{
    margin:2.5em 0;
    padding:1.2em 1.5em;
    border-left:3px solid #222;
    background:#F6F6F6;
}

#article .body pre{
    max-width:100%;
    margin:2.5em 0;
    padding:1.25em 1.4em;
    overflow:auto;
    background:#161616;
    color:#F5F5F5;
    font-size:.84em;
    line-height:1.75;
}

#article .body table{
    width:100%;
    margin:2.5em 0;
    border-collapse:collapse;
    font-size:.9em;
}

#article .body th,
#article .body td{
    padding:.8em 1em;
    border:1px solid #DDD;
    text-align:left;
}

#article-navigation{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    margin-top:clamp(54px, 8vw, 90px);
    padding-top:24px;
    border-top:1px solid #D8D8D8;
}

#article-navigation a{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    color:inherit;
}

#article-navigation a.next{
    text-align:right;
}

#article-navigation a span{
    color:#777;
    font-size:10px;
    letter-spacing:.08em;
}

#article-navigation a strong{
    overflow:hidden;
    font-size:13px;
    font-weight:500;
    line-height:1.6;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#related{
    margin-top:clamp(64px, 9vw, 110px);
    padding-top:24px;
    border-color:#D8D8D8;
}

#related h3{
    margin:0 0 24px;
    font-size:13px;
    letter-spacing:.08em;
}

#related ul{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    list-style:none;
}

#related li{
    min-width:0;
}

#related li a{
    display:block;
    height:100%;
    color:inherit;
}

#related li figure{
    position:relative;
    width:100%;
    aspect-ratio:16 / 10;
    margin:0;
    overflow:hidden;
    border:1px solid #E8E8E8;
    border-radius:4px;
    background:#F2F2F2;
}

#related li figure img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

#related li figure .tag{
    position:absolute;
    z-index:1;
    top:10px;
    left:10px;
    padding:4px 9px;
    border-radius:2px;
    background:#fffffff2;
    color:#333;
    font-size:9px;
}

#related ul li h4{
    margin:12px 0 0;
    font-size:15px;
    line-height:1.7;
}

#related li .date{
    margin-top:8px;
    color:#777;
    font-size:10px;
    letter-spacing:.08em;
}

@media (max-width:680px){
    #article-navigation{
        gap:14px;
    }

    #article-navigation a strong{
        font-size:12px;
    }

    #related ul{
        grid-template-columns:1fr;
        gap:30px;
    }
}

#article .body::after{
    content:"";
    display:block;
    clear:both;
}

#article .body figure{
    width:100%;
    max-width:800px;
    aspect-ratio:auto;
    margin:clamp(1.5rem, 4vw, 3rem) auto;
    display:block;
    overflow:visible;
}

#article .body figure img,
#article .body > img{
    display:block;
    width:100%;
    max-width:800px;
    height:auto;
    aspect-ratio:auto;
}

#article .body figure.small,
#article .body > img.small{ width:40%; }

#article .body figure.medium,
#article .body > img.medium{ width:60%; }

#article .body figure.large,
#article .body > img.large{ width:80%; }

#article .body figure.full,
#article .body > img.full{ width:100%; }

#article .body figure.left,
#article .body > img.left{
    float:left;
    margin:0 2rem 1.5rem 0;
}

#article .body figure.center,
#article .body > img.center{
    float:none;
    margin-left:auto;
    margin-right:auto;
}

#article .body figure.right,
#article .body > img.right{
    float:right;
    margin:0 0 1.5rem 2rem;
}

#article .body figcaption{
    margin-top:.65rem;
    font-size:.8em;
    line-height:1.6;
}

@media (max-width:680px){
    .page-article main > .inner{
        width:min(100% - 32px, 860px);
        padding-top:10px;
    }

    .page-article #breadcrumb{
        margin-bottom:32px;
    }

    #article > h1{
        font-size:clamp(27px, 8vw, 36px);
    }

    #article .body{
        font-size:16px;
        line-height:2.05;
    }

    #article .body h2{
        margin:1.15em 0;
    }

    #article .body figure.small,
    #article .body figure.medium,
    #article .body figure.large,
    #article .body figure.full,
    #article .body > img.small,
    #article .body > img.medium,
    #article .body > img.large,
    #article .body > img.full{
        float:none;
        width:100%;
        margin:1.5rem 0;
    }
}