.art-with-sidebar{
position:relative;
width:100%;
margin:0 auto;
}
.art-with-sidebar>article{
width:var(--pw2);
margin:var(--gap) auto;
}
.content{
padding:var(--gap);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
box-shadow:var(--fbs);
border-radius:var(--br1);
}
.content img{
border-radius:var(--br1);
}
article{
margin:var(--gap) auto;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
box-shadow:var(--fbs);
border-radius:var(--br1);
overflow:hidden;
width:var(--pw2);
}
article .content{
border:none;
box-shadow:none;
border-radius:0;
}
article:has(.art-links-section){
margin-bottom:var(--gap);
}
article h1{
font-weight:750;
font-size:50px;
line-height:1.3;
letter-spacing:-.4px;
font-family:var(--ff1);
margin:0 0 var(--gd2);
color:var(--tx1);
width:100%;
}
.meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
color:var(--tx2);
font-size:var(--fz1);
line-height:1.4;
margin:0 0 var(--gap);
width:100%;
}
.meta a{
color:var(--lnk);
}
.meta a:hover{
text-decoration:underline;
text-decoration-thickness:1px;
}
.art-tags{
width:var(--pw2);
margin:var(--gap) auto 0;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0 10px;
line-height:var(--lh1);
}
.tags-label{
font-size:var(--fz1);
font-weight:400;
color:var(--tx2);
font-family:var(--ff1);
}
.tag-link-simple{
color:var(--lnk);
font-size:var(--fz1);
font-weight:400;
font-family:var(--ff1);
line-height:var(--lh1);
}
.tag-link-simple:hover{
text-decoration:underline;
text-decoration-thickness:1px;
}
.art-links-section{
margin:0;
border-top:var(--bw1) solid var(--bc1);
overflow:hidden;
background-color:var(--bg2);
width:100%;
}
.art-links-toggle{
width:100%;
background-color:transparent;
border:none;
padding:16px var(--gap);
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap);
color:var(--tx1);
font-family:var(--ff2);
font-size:20px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.art-links-toggle:hover,
.art-links-toggle.active{
background-color:var(--hv1);
color:var(--cl1);
}
.art-links-toggle.disabled{
opacity:0.4;
cursor:not-allowed;
pointer-events:none;
}
.art-links-icon,
.art-links-arrow{
width:24px;
height:24px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.art-links-icon svg,
.art-links-arrow svg{
width:24px;
height:24px;
stroke:currentColor;
fill:currentColor;
}
.art-links-text{
flex:1;
text-align:left;
}
.art-links-content{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease,border-top-width 0s .3s;
border-top:0 solid var(--bc1);
}
.art-links-content.active{
grid-template-rows:1fr;
border-top-width:var(--bw1);
transition:grid-template-rows .3s ease,border-top-width 0s 0s;
}
.art-links-inner{
overflow:hidden;
min-height:0;
}
.green-dot{
width:24px;
height:24px;
background-color:var(--cl2);
border-radius:50%;
margin:var(--gap) auto 0;
display:block;
border:none;
padding:0;
cursor:pointer;
transition:100ms;
}
.green-dot:hover{
transform:scale(1.15);
}
.yt-wrap{
max-width:100%;
margin:20px auto;
}
.yt{
width:100%;
aspect-ratio:16/9;
border-radius:var(--br1);
}