.prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sun),var(--rose))}
.phero--post{padding-bottom:clamp(100px,9vw,132px)}
.phero--post .phero__in{grid-template-columns:minmax(0,1fr)}
.phero--post h1{font-size:clamp(38px,5vw,66px);max-width:18ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px;font-size:14px;color:rgba(255,255,255,.7)}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid rgba(255,255,255,.3)}
.byline b{color:#fff;font-weight:600;display:block}
.byline__who{display:flex;align-items:center;gap:12px}
.byline i{width:4px;height:4px;border-radius:50%;background:var(--sun);display:inline-block}

.cover{background:var(--paper);padding-top:0}
.cover .ph{border-radius:var(--r-lg);aspect-ratio:21/8;margin-top:clamp(-70px,-5vw,-40px);position:relative;z-index:3}

.art{background:var(--paper);padding-top:clamp(40px,5vw,64px)}
.art__in{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:clamp(30px,4vw,64px);align-items:start}
.art__in--no-toc{grid-template-columns:minmax(0,1fr) 300px}
.toc{position:sticky;top:108px}
.toc__lbl{font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid rgba(var(--plum-500-rgb),.2)}
.toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);transition:color .3s,border-color .3s}
.toc a:hover{color:var(--plum-700)}
.toc a.is-on{color:var(--plum-800);font-weight:600;border-left-color:var(--rose)}
.toc__sub a{padding-left:28px;font-size:13px}

.prose{max-width:68ch;font-size:18px;line-height:1.78;color:#352b47}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(28px,2.8vw,38px);margin-top:2em;color:var(--ink);scroll-margin-top:100px}
.prose h3{font-size:clamp(21px,2vw,26px);margin-top:1.8em;color:var(--plum-800);scroll-margin-top:100px;display:flex;gap:14px;align-items:baseline}
.prose h3 span{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--rose);flex:0 0 auto}
.prose .lead{font-size:clamp(20px,1.7vw,23px);line-height:1.6;color:var(--plum-800);font-family:var(--display);font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 36}
.prose ul{padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px}
.prose ul li+li{margin-top:.45em}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--sun),var(--rose))}
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:a;list-style:none;padding:0}
.areas a{display:flex;gap:14px;align-items:center;background:var(--lilac);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15.5px;font-weight:600;
  color:var(--plum-800);line-height:1.35;transition:border-color .3s,transform .4s var(--ease)}
.areas a:hover{border-color:var(--rose);transform:translateY(-2px)}
.areas a::before{counter-increment:a;content:counter(a);font-family:var(--display);font-size:22px;color:var(--rose);width:22px;flex:0 0 auto}
.bench{background:var(--plum-800);color:#fff;border-radius:var(--r-lg);padding:28px 28px 26px;margin:2em 0}
.bench__h{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sun-soft);margin-bottom:18px}
.bench__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bench b{display:block;font-family:var(--display);font-size:clamp(34px,3.4vw,46px);line-height:1;font-weight:600;letter-spacing:-.03em;
  background:linear-gradient(160deg,#fff 20%,var(--sun-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.bench span{display:block;margin-top:8px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.45}
.help{background:var(--sand);border-radius:var(--r-lg);padding:28px 30px;margin-top:2em}
.help h3{margin-top:0}
.help .btn{margin-top:18px}

.aside{position:sticky;top:108px;display:grid;gap:16px}
.acard{background:var(--lilac);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 20px}
.acard img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;margin-bottom:12px}
.acard b{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--plum-800);line-height:1.2}
.acard small{display:block;font-size:12.5px;color:var(--rose);font-weight:600;margin:3px 0 10px}
.acard p{font-size:13.8px;color:var(--muted);line-height:1.6}
.acard--dark{background:var(--plum-800);border-color:transparent;color:#fff}
.acard--dark b{color:#fff}
.acard--dark p{color:rgba(255,255,255,.7);margin-bottom:14px}
.acard--dark .btn{padding:11px 16px;font-size:13.5px;width:100%;justify-content:center}

.rel{background:var(--lilac)}

@media(max-width:1180px){
  .art__in{grid-template-columns:210px minmax(0,1fr)}
  .aside{position:static;grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .art__in--no-toc{grid-template-columns:minmax(0,1fr)}
  .art__in--no-toc .aside{grid-column:1}
}
@media(max-width:1080px){
  .art__in{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;background:var(--lilac);border-radius:var(--r-md);padding:20px}
  .aside{grid-column:auto}
  .cover .ph{aspect-ratio:16/9}
}
@media(max-width:660px){
  .prose{font-size:17px}
  .areas,.bench__g,.aside{grid-template-columns:minmax(0,1fr)}
}

/* ---------- article comments ---------- */
.comments{background:var(--lilac)}
.cmt-count{align-self:start;text-align:right;font-size:14px;color:var(--muted)}
.cmt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:clamp(30px,4vw,44px)}
.cmt-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.cmt-card p{font-size:15.4px;color:var(--ink);line-height:1.68}
.cmt-card footer{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cmt-card footer b{font-size:14.5px;color:var(--plum-800)}
.cmt-card footer span{font-size:12.5px;color:var(--muted)}
.cmt-empty{font-size:16px;color:var(--muted);margin-bottom:clamp(24px,3vw,36px)}

.cmt-form-wrap{max-width:640px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,38px)}
.cmt-form-wrap h3{font-size:clamp(21px,2.1vw,25px);margin-bottom:6px}
.cmt-form-note{font-size:14px;color:var(--muted);margin-bottom:22px}
.cmt-form .field{margin-bottom:16px}
.cmt-form .field > label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--plum-500);margin-bottom:8px}
.cmt-form .field input,.cmt-form .field textarea{width:100%;background:var(--lilac);border:1px solid rgba(var(--plum-500-rgb),.2);border-radius:13px;
  padding:13px 16px;font-family:var(--body);font-size:15.5px;color:var(--ink);transition:border-color .3s,background .3s,box-shadow .3s}
.cmt-form .field textarea{min-height:110px;resize:vertical}
.cmt-form .field input:focus,.cmt-form .field textarea:focus{outline:none;background:#fff;border-color:var(--rose);box-shadow:0 0 0 4px rgba(var(--rose-rgb),.14)}
.cmt-form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.hp-field{display:none}
.cmt-form .btn{margin-top:4px}
.cmt-msg{font-size:14px;margin-top:14px;color:var(--plum-700)}
.cmt-msg.is-err{color:#B3261E}

@media(max-width:1080px){
  .cmt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:660px){
  .cmt-grid{grid-template-columns:minmax(0,1fr)}
  .cmt-form .row2{grid-template-columns:minmax(0,1fr)}
}

/* two adjacent sections that share a background (comments <-> related): tighten the gap */
.section--stack-tight{padding-top:clamp(28px,3.5vw,48px)}
.section--stack-divider{border-top:1px solid rgba(var(--plum-500-rgb),.14)}