.public-page{max-width:1240px;margin:0 auto}

/* A complete editorial cover: the archive begins only after the first screen. */
.article-hero{
  display:grid;
  min-height:calc(100vh - 70px);
  padding:clamp(48px,6vh,76px) 0 clamp(54px,7vh,88px);
  grid-template-rows:auto 1fr;
  align-content:stretch;
}

.article-hero>.kicker{margin:0 0 clamp(30px,4vh,52px)}
.article-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(380px,.72fr);
  gap:clamp(52px,6vw,88px);
  align-self:stretch;
  align-items:center;
}
.article-hero-copy{padding:10px 0}
.issue-label{margin:0 0 22px;color:var(--rust);font:8px/1.4 Arial,sans-serif;letter-spacing:.18em}
.article-hero h1{max-width:620px;margin:0;font:400 clamp(42px,4.1vw,58px)/1.08 Georgia,"Songti SC",serif!important;letter-spacing:-.035em}
.article-hero h1 em{color:var(--rust);font-weight:400}
.article-thesis{max-width:410px;margin:30px 0 0;padding-left:18px;border-left:2px solid var(--mustard,#ddb126);color:rgba(32,27,20,.76);font:14px/1.9 "PingFang SC","Microsoft YaHei",sans-serif}

.writing-paper{position:relative;display:flex;min-height:370px;flex-direction:column;padding:30px 34px;transform:rotate(.15deg);border:1px solid var(--line);background:#f8f1df;box-shadow:10px 12px 0 rgba(32,27,20,.065)}
.writing-paper:before{position:absolute;top:73px;right:34px;left:34px;border-top:1px solid var(--line);content:""}
.paper-meta{display:flex;justify-content:space-between;font:7px Arial,sans-serif;letter-spacing:.17em}
.writing-paper blockquote{margin:66px 0 22px;padding:0;border:0;font:400 clamp(25px,2.25vw,32px)/1.55 Georgia,"Songti SC",serif}
.writing-paper blockquote em{color:var(--rust);font-weight:400}
.writing-paper>p{max-width:390px;margin:0;opacity:.68;font:11px/1.85 "PingFang SC","Microsoft YaHei",sans-serif}
.writing-paper>strong{align-self:flex-end;margin-top:auto;color:var(--rust);font:italic 27px Georgia,serif}

/* Compact magazine columns directly after the cover. */
.article-intro{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 0 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.article-intro>div{padding:27px 32px 29px;background:transparent}
.article-intro>div+div{border-left:1px solid var(--line)}
.article-intro span{color:var(--rust);font:italic 14px Georgia,serif}
.article-intro h2{margin:15px 0 8px;font:400 25px/1.25 Georgia,"Songti SC",serif}
.article-intro p{max-width:480px;margin:0;color:rgba(32,27,20,.68);font-size:11px;line-height:1.75}

/* Archive rows read like a journal index. */
.article-archive{padding:0 0 68px}
.article-archive>.rule{margin-bottom:0}
.empty-article{display:grid;grid-template-columns:80px minmax(0,1fr);gap:28px;align-items:start;padding:30px 0 34px;border-bottom:1px solid var(--line)}
.empty-article>span{padding-top:2px;color:var(--rust);font:italic 34px/1 Georgia,serif}
.empty-article h2{margin:0 0 8px;font:400 27px/1.35 Georgia,"Songti SC",serif}
.empty-article p{max-width:620px;margin:0;color:rgba(32,27,20,.68);font-size:11px;line-height:1.8}

/* Owner-only publishing desk. */
.article-composer{margin:54px 0;padding:38px;border:1px solid var(--line);background:rgba(255,250,236,.34)}
.article-composer-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:30px}
.article-composer-head h2{margin:12px 0 0;font:400 34px/1.15 Georgia,"Songti SC",serif}
#articleStatus{max-width:420px;color:var(--rust);font-size:11px;line-height:1.7;text-align:right}
.article-composer label{display:block;margin-top:20px;font-size:10px;letter-spacing:.08em}
.article-composer input,.article-composer select,.article-composer textarea{width:100%;margin-top:9px;padding:13px 3px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:14px/1.7 "PingFang SC","Microsoft YaHei",sans-serif}
.article-composer textarea{min-height:88px;resize:vertical}
.article-composer #articleBody{min-height:280px;font:17px/1.9 Georgia,"Songti SC",serif}
.article-form-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.article-composer-actions{display:flex;justify-content:flex-end}.article-composer-actions button{min-width:150px}

/* Published writing archive. */
.article-feed{border-top:1px solid var(--line)}
.article-row{position:relative;display:grid;grid-template-columns:75px minmax(0,1fr) auto;gap:28px;padding:34px 0;border-bottom:1px solid var(--line)}
.article-number{color:var(--rust);font:italic 31px/1 Georgia,serif}
.article-row-meta{display:flex;gap:18px;margin-bottom:13px;color:rgba(32,27,20,.55);font:8px/1.4 Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.article-row h2{margin:0 0 11px;font:400 clamp(25px,2.5vw,35px)/1.25 Georgia,"Songti SC",serif}
.article-row-main>p{max-width:690px;margin:0;color:rgba(32,27,20,.7);font-size:12px;line-height:1.85}
.read-article,.delete-article,.article-load-more{border:0;background:transparent;padding:0;cursor:pointer;color:var(--rust)}
.read-article{margin-top:19px;font-size:10px}.delete-article{align-self:start;font-size:10px}.article-load-more{display:block;margin:35px auto 0;border-bottom:1px solid;padding-bottom:4px}
.empty-articles{padding:42px 0;border-bottom:1px solid var(--line);color:rgba(32,27,20,.55);font:17px Georgia,"Songti SC",serif}

/* Quiet full-article reader. */
.article-reader[hidden]{display:none}.article-reader{position:fixed;inset:0;z-index:1000;overflow:auto;padding:55px 20px}
.article-reader-backdrop{position:fixed;inset:0;background:rgba(24,20,15,.74);backdrop-filter:blur(4px)}
.article-reader-paper{position:relative;width:min(760px,100%);min-height:80vh;margin:0 auto;padding:65px 76px 78px;background:#f7eed9;box-shadow:18px 22px 0 rgba(0,0,0,.16)}
.close-reader{position:absolute;top:22px;right:25px;margin:0;padding:5px 9px;border:0;background:transparent;font:25px/1 Georgia,serif}
.reader-meta{display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);font:8px Arial,sans-serif;letter-spacing:.16em}
.article-reader-paper h1{margin:55px 0 18px;font:400 clamp(36px,5vw,58px)/1.12 Georgia,"Songti SC",serif}
.reader-summary{margin:0 0 45px;padding-left:18px;border-left:2px solid var(--rust);color:rgba(32,27,20,.68);font-size:13px;line-height:1.9}
.reader-body p{margin:0 0 25px;font:16px/2 Georgia,"Songti SC",serif}
.reader-sign{margin-top:55px;color:var(--rust);text-align:right;font:italic 30px Georgia,serif}

@media(max-width:850px){
  .article-hero{min-height:auto;padding:46px 0 64px}
  .article-hero-layout{grid-template-columns:1fr;gap:36px}
  .article-hero-copy{padding:0}
  .writing-paper{max-width:580px;min-height:360px}
}

@media(max-width:560px){
  .article-hero{padding:38px 0 44px}
  .article-hero>.kicker{margin-bottom:24px}
  .article-hero h1{font-size:37px!important}
  .article-thesis{margin-top:25px;font-size:13px}
  .writing-paper{min-height:345px;padding:25px 23px;transform:none;box-shadow:7px 8px 0 rgba(32,27,20,.065)}
  .writing-paper:before{top:66px;right:23px;left:23px}
  .writing-paper blockquote{margin-top:58px;font-size:24px}
  .writing-paper>p{font-size:10px}
  .article-intro{grid-template-columns:1fr;margin-bottom:38px}
  .article-intro>div{padding:23px 4px}
  .article-intro>div+div{border-top:1px solid var(--line);border-left:0}
  .empty-article{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:25px 0}
  .empty-article>span{font-size:26px}
  .empty-article h2{font-size:23px}
  .article-composer{padding:25px 20px}.article-composer-head{display:block}#articleStatus{margin-top:15px;text-align:left}.article-form-row{grid-template-columns:1fr}
  .article-row{grid-template-columns:42px minmax(0,1fr);gap:14px}.delete-article{grid-column:2;justify-self:start}.article-row-meta{display:block}.article-row-meta span{display:block;margin-bottom:5px}
  .article-reader{padding:18px 10px}.article-reader-paper{padding:50px 26px 60px}.article-reader-paper h1{margin-top:40px}.reader-body p{font-size:15px}
}

/* Keep the editorial opening as one complete horizontal screen. */
.article-hero{grid-template-columns:minmax(0,1fr)!important}
.article-hero>.kicker{grid-column:1!important}
@media(min-width:701px){
  .article-hero{min-height:calc(100svh - 70px);padding:clamp(38px,5vh,64px) 0}
  .article-hero-layout{grid-template-columns:minmax(0,.92fr) minmax(320px,.72fr);gap:clamp(38px,5vw,72px);align-items:center}
  .article-hero h1{font-size:clamp(38px,3.7vw,54px)!important}
  .writing-paper{min-height:350px}
}
@media(max-width:700px){
  .article-hero{min-height:auto}
  .article-hero-layout{grid-template-columns:1fr}
}