.articles-main,
.article-main{
  position:relative;
  z-index:2;
  padding:118px 0 72px;
}

/* PC page glass follows the established PC section width.
   Reading/list/editor content stays on its own centered rail. */
.articles-shell,
.article-reader,
.article-editor{
  width:var(--section-page-width);
  max-width:none;
  margin:0 auto;
  padding:clamp(36px,3.2vw,50px) clamp(40px,4.4vw,68px);
}

.articles-column{
  width:min(980px,100%);
  margin:0 auto;
}
body.articles-page .articles-shell{
  min-height:max(560px,calc(100dvh - 245px));
}

.articles-head,
.article-editor-head,
.article-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.articles-head h1,
.article-reading-column>h1,
.article-editor h1{
  margin:0;
}

.articles-head h1{
  font-size:35px;
  line-height:1.12;
}

.articles-head p{
  margin:10px 0 0;
  font-size:18px;
  line-height:1.55;
}

.article-category-filters{
  margin-top:26px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.article-category-filter{
  min-height:38px;
  padding:0 14px;
  cursor:pointer;
}
.articles-list{
  margin-top:20px;
  display:grid;
}
.article-list-item{
  display:block;
  padding:18px 4px 20px;
}
.article-list-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.article-list-item time,
.article-category,
.article-list-meta,
.article-meta{
  font-size:15px;
  line-height:1.45;
}
.article-category{
  flex:0 0 auto;
}
.article-list-item h2{
  margin:7px 0 8px;
  font-size:25px;
  line-height:1.28;
}
.article-list-meta{
  margin-top:0;
}

.articles-status,
.article-load-status{
  min-height:24px;
  margin-top:18px;
}

/* Article detail: outer PC glass is wide; actual text remains narrow. */
.article-topline{
  margin-bottom:44px;
}

.article-admin-actions:not([hidden]){
  display:flex;
  gap:10px;
}

.article-reading-column{
  width:min(820px,100%);
  margin:0 auto;
}

.article-reading-column>h1{
  font-size:40px;
  line-height:1.2;
  letter-spacing:-.025em;
}

.article-meta{
  margin-top:15px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}

.article-content{
  width:100%;
  margin:52px auto 0;
  font-size:19px;
  line-height:1.9;
}

.article-content p{
  margin:0 0 26px;
  white-space:pre-wrap;
}

.article-content figure{
  margin:36px 0;
}

.article-content img{
  display:block;
  width:100%;
  height:auto;
}

.article-content figcaption{
  margin-top:10px;
  font-size:14px;
  text-align:center;
}

.article-link-block{
  margin:0 0 26px;
}

.article-engagement{
  width:100%;
  margin:54px auto 0;
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.article-messages{
  width:100%;
  margin:50px auto 0;
  padding-top:26px;
}

.article-messages-head,
.article-message-compose-foot,
.article-message-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.article-messages-head h2{
  margin:0;
  font-size:26px;
}

.article-message-composer{
  margin-top:20px;
}

.article-message-composer textarea{
  width:100%;
  min-height:116px;
  resize:vertical;
  padding:16px;
  font:inherit;
}

.article-message-compose-foot{
  margin-top:10px;
}

.article-login-message{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.article-message-list{
  margin-top:26px;
  display:grid;
  gap:0;
}

.article-message{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:20px 0;
}

.article-message-avatar{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

.article-message-head strong,
.article-message-head time,
.article-message-delete{
  font-size:14px;
}

.article-message-head{
  justify-content:flex-start;
}

.article-message-head time{
  margin-left:auto;
}

.article-message p{
  margin:8px 0 0;
  font-size:16px;
  line-height:1.65;
  white-space:pre-wrap;
}

.article-message-delete{
  padding:0;
}

/* PC editor stays simple: title + body, with only image/link insertion tools. */
.article-editor-column{
  width:min(980px,100%);
  margin:0 auto;
}

.article-editor-field{
  margin-top:28px;
  display:grid;
  gap:10px;
}

.article-editor-field>span{
  font-size:15px;
}

.article-editor-field input,
.article-editor-field select{
  width:100%;
  min-height:52px;
  padding:0 15px;
  font-size:18px;
}

.article-editor-tools{
  display:flex;
  gap:10px;
}

.article-editor-body{
  min-height:520px;
  padding:20px;
  font-size:18px;
  line-height:1.8;
}

.article-editor-body>div{
  min-height:1.8em;
  white-space:pre-wrap;
}

.article-editor-body figure{
  margin:22px 0;
}

.article-editor-body img{
  display:block;
  width:min(100%,760px);
  height:auto;
  margin:auto;
}

.article-editor-submit{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}

@media (max-width:900px){
  .articles-shell,
  .article-reader,
  .article-editor{
    width:calc(100vw - 36px);
    padding:30px 26px;
  }
}
.article-language-switch{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
}
.article-language-switch[hidden]{
  display:none;
}
.article-language-switch .article-category-filter{
  min-width:0;
}
.article-editor-language-section{
  display:grid;
  gap:14px;
}
.article-editor-language-section + .article-editor-language-section{
  margin-top:22px;
}
.article-editor-language-label{
  margin:0;
  font-size:18px;
  font-weight:400;
}
.article-editor-language-optional{
  font-size:15px;
  font-weight:400;
}

.article-editor-language-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
}
.article-editor-language-tabs .article-category-filter{
  min-width:0;
}
.article-editor-language-section[hidden]{
  display:none;
}