/* v20 — final overrides kept separate so the selected direction wins cleanly. */
.logo-short{display:none}

.article-chapter{
  padding-top:104px;
  padding-bottom:14px;
  background:
    linear-gradient(180deg,rgba(238,244,247,0) 0%,#eef4f7 100%),
    linear-gradient(110deg,#f8fbfd 0%,#eef4f7 48%,#dce8ef 100%)!important;
}
.visual-chapter{padding-top:46px;padding-bottom:14px}
.article-chapter .section-heading,.visual-chapter .section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"eyebrow note" "title note";
  column-gap:32px;
  row-gap:6px;
  align-items:end;
  padding:0 0 23px;
}
.article-chapter .section-heading>p,.visual-chapter .section-heading>p{
  grid-area:eyebrow;
  margin:0;
  white-space:nowrap;
  font-size:10px;
  line-height:1;
  font-weight:500;
  letter-spacing:.12em;
  color:#397497;
}
.article-chapter .section-heading h2,.visual-chapter .section-heading h2{grid-area:title;margin:0;font-size:30px;line-height:1.18;font-weight:620;letter-spacing:-.025em;color:#183247}
.article-chapter .section-heading>span,.visual-chapter .section-heading>span{grid-area:note;align-self:end;margin:0 0 2px;font-size:12px;line-height:1.5;color:#687b87}
.collection h3{font-size:27px;line-height:1.25}
summary{font-size:14px;line-height:1.4;font-weight:500;padding:9px 0}
summary span{font-size:15px;margin-left:14px}
.gallery-controls>span{font-size:13px;line-height:1.5;font-weight:500;color:rgba(38,65,85,.72)}
.gallery-controls button{width:40px;height:40px}

.about{
  position:relative;
  isolation:auto;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:76px max(28px,calc((100vw - 1180px)/2));
  background:#758087;
  color:#f7f9fa;
  grid-template-columns:120px minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.about:before,.about:after{display:none;content:none}
.about .avatar{display:block;width:120px;height:150px;object-fit:cover;object-position:50% 42%;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.075);box-shadow:none;color:#edf2f4}
.about .kicker{color:#d0dce1}
.about h2{color:#fff}
.about>div:last-child>p:not(.kicker):not(.process),.about>div:last-child>p{color:#e3e8ea!important}
.about .tags span{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#f1f4f5}
.about .resume{border:0;background:#f2f5f6;color:#3f4c52}
.about .email{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.about .about-actions a:hover{box-shadow:none}
footer{border:0;background:#667178;color:#d0d7da}

@media(max-width:800px){
  .article-chapter{padding-top:86px}
  .visual-chapter{padding-top:42px}
  .article-chapter .section-heading,.visual-chapter .section-heading{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "note";row-gap:0}
  .article-chapter .section-heading>p,.visual-chapter .section-heading>p{margin-bottom:7px;font-size:9px;letter-spacing:.08em}
  .article-chapter .section-heading h2,.visual-chapter .section-heading h2{font-size:28px}
  .article-chapter .section-heading>span,.visual-chapter .section-heading>span{margin:9px 0 0;font-size:12px}
  .collection h3{font-size:25px}
  .about{grid-template-columns:96px minmax(0,1fr);gap:36px}
  .about .avatar{width:96px;height:120px}
}
@media(max-width:520px){
  .topbar{height:56px;padding:0 14px;gap:12px}
  .topbar .logo{flex:0 0 auto;white-space:nowrap;font-size:11.5px;font-weight:620;letter-spacing:.01em}
  .logo-full{display:none}
  .logo-short{display:inline}
  .topbar nav{min-width:0;margin-left:auto;gap:clamp(8px,2.4vw,12px)}
  .topbar nav a,.topbar nav a:first-child{display:inline-block;white-space:nowrap;font-size:11.5px;line-height:1}
  .article-chapter{padding-top:72px}
  .visual-chapter{padding-top:36px}
  .article-chapter .section-heading>p,.visual-chapter .section-heading>p{font-size:8px;letter-spacing:.045em}
  .article-chapter .section-heading h2,.visual-chapter .section-heading h2{font-size:26px}
  .collection h3{font-size:24px}
  .gallery-controls>span{font-size:11px}
  .about{grid-template-columns:1fr;gap:24px;padding-top:62px;padding-bottom:62px}
  .about .avatar{width:84px;height:105px}
}

@media(max-width:360px){
  .topbar{padding-inline:12px;gap:8px}
  .topbar .logo,.topbar nav a,.topbar nav a:first-child{font-size:11px}
  .topbar nav{gap:7px}
}

/* Real article reader: one card can contain several seamless long-image parts. */
.reader{
  width:min(1120px,calc(100% - 32px));
  height:min(860px,calc(100% - 32px));
  overflow:auto;
  overscroll-behavior:contain;
}
.reader-layout{
  grid-template-columns:170px minmax(0,1fr);
  gap:38px;
  align-items:start;
  padding:36px 46px 80px;
}
.reader-layout aside{
  position:sticky;
  top:72px;
  align-self:start;
}
.reader-layout aside h2{
  margin:18px 0 0;
  color:#183247;
  font-size:17px;
  font-weight:620;
  line-height:1.48;
  letter-spacing:-.02em;
}
.reader-layout article{min-width:0}
.reader-layout article .reader-pages{
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  max-width:760px;
  margin:0 auto;
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.reader-layout article .reader-pages img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  margin:0;
  object-fit:contain;
  background:#fff;
}
.load-error{margin:0;padding:72px max(28px,calc((100vw - 1180px)/2));color:#687b87}

@media(max-width:800px){
  .reader-layout{grid-template-columns:1fr;gap:22px;padding:28px 24px 72px}
  .reader-layout aside{position:static;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
  .reader-layout aside p{margin:0;text-align:right}
  .reader-layout aside h2{grid-column:1/-1;margin-top:10px;font-size:21px}
}
@media(max-width:520px){
  .reader{inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0}
  .reader-layout{padding:22px 16px 72px}
  .reader-layout article .reader-pages{width:calc(100% + 32px);max-width:none;margin-left:-16px}
  .reader-layout aside h2{font-size:19px}
  .reader-close,.reader>nav button{min-height:48px}
}