/* Blog post page. One grid for everything: [contents 220] [article 700] [rail 240], centred.
   The title, cover and body all start on the article column's left edge. Body typography, figures, table,
   call-to-action box and FAQ keep their styles from blog.css (.post-body …). Tokens from styles.css. */

.art-grid{display:grid;grid-template-columns:220px minmax(0,700px) 240px;column-gap:clamp(32px,3.6vw,56px);justify-content:center}

/* reading progress */
.art-progress{position:fixed;inset:0 0 auto;z-index:60;height:3px;pointer-events:none}
.art-progress span{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%}

/* ---- header band ---- */
.art-hero{background:var(--mist,#e8efea);padding-top:clamp(48px,5.5vw,80px);padding-bottom:clamp(120px,13vw,190px)}
.art-hero-text{grid-column:2/4}
.art-crumbs{display:flex;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.art-crumbs a{color:var(--green);text-decoration:none}
.art-crumbs a:hover{text-decoration:underline}
.art-hero h1{margin:22px 0 0;max-width:900px;font-size:clamp(36px,3.7vw,54px);line-height:1.1;letter-spacing:-.035em;font-weight:450;color:var(--ink)}
.art-lead{max-width:740px;margin:20px 0 0;font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--muted)}
.art-byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}
.art-byline>div{display:flex;flex-direction:column;line-height:1.35}
.art-byline strong{font-size:15px;font-weight:550}
.art-byline>div span{font-size:13px;color:var(--muted)}
.art-avatar{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-weight:600;font-size:16px}
.art-byline .art-avatar{margin-right:-14px}
.art-facts{display:flex;gap:0;margin:0;padding-left:28px;border-left:1px solid #c5d3ca;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.art-facts span+span::before{content:"·";margin:0 10px}

/* ---- cover: overlaps the band ---- */
.art-cover-row{margin-top:calc(-1 * clamp(84px,9.5vw,140px))}
.art-cover{grid-column:2/4;margin:0;aspect-ratio:12/5;overflow:hidden;border-radius:6px;background:#dfe7e1;box-shadow:0 24px 60px #0c3a1814}
.art-cover img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- body row ---- */
.art-layout{align-items:start;padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(56px,6vw,88px)}
.art.no-cover .art-hero{padding-bottom:clamp(40px,4.5vw,64px)}
.art.no-cover .art-layout{padding-top:clamp(40px,4.5vw,64px)}
.art-label{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.art-toc,.art-rail{position:sticky;top:calc(112px + var(--utility-h,0px))}
.art-toc summary{list-style:none;cursor:default}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc ol{list-style:none;margin:16px 0 0;padding:0;border-left:1px solid var(--line);counter-reset:toc}
.art-toc li{counter-increment:toc}
.art-toc a{position:relative;display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.art-toc a:hover{color:var(--ink)}
.art-toc a[aria-current]{color:var(--green);border-left-color:var(--green);font-weight:500}
.art-body{min-width:0}
.art-body>.post-cta{margin-block:48px}
.art-body>.post-faq{margin-top:56px}
.art-share>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.art-share-btn{font:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s}
.art-share-btn:hover{border-color:var(--green);color:var(--green)}
.art-rail-card{margin-top:28px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:4px}
.art-rail-card>p:not(.art-label){margin:10px 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
.art-rail-card .button{width:100%;justify-content:space-between;font-size:14px;min-height:46px;padding:12px 16px}

/* ---- end of article ---- */
.art-end{padding-bottom:clamp(56px,6vw,88px)}
.art-end-main{grid-column:2/3;padding-top:36px;border-top:1px solid var(--ink)}
.art-author{display:flex;gap:18px;align-items:flex-start}
.art-author strong{display:block;margin-top:6px;font-size:17px;font-weight:550}
.art-author div>p:last-child{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.art-end-links{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:28px}
.art-share-mobile{display:none}
.art-more{background:var(--mist,#e8efea);padding-block:clamp(48px,6vw,80px)}
.art-more-inner{grid-column:2/4}
.art-more-head{display:flex;justify-content:space-between;align-items:end;gap:20px}
.art-more-head h2{margin:0;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;font-weight:450}
.art-more-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.art-more-card{display:block;padding:14px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.art-more-card:hover{border-color:#c3d2c8;box-shadow:0 12px 30px #0c3a1810}
.art-more-card figure{margin:0 0 14px;aspect-ratio:16/10;overflow:hidden;border-radius:3px}
.art-more-card img{display:block;width:100%;height:100%;object-fit:cover}
.art-more-card .eyebrow{margin:0;font-size:10px}
.art-more-card h3{margin:8px 0 0;font-size:17px;line-height:1.3;font-weight:500}
.art-more-meta{margin:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* ---- Resources entries: video cover, action card ---- */
.art-cover{position:relative}
.art-cover iframe{display:block;width:100%;height:100%;border:0}
.art-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#ffffffe6;color:var(--green);box-shadow:0 10px 30px #0c3a1833}
.art-play svg{margin-left:4px}
.art-play-note{position:absolute;left:50%;top:calc(50% + 60px);transform:translateX(-50%);padding:6px 12px;border-radius:99px;background:#0f241bcc;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#fff;white-space:nowrap}
.art-facts.is-solo{padding-left:0;border-left:0}
.art-action{margin:0 0 28px;background:var(--mist,#e8efea);border-color:transparent}
.art-rail .art-action+.art-share{margin-top:0}
.art-action-title{margin:10px 0 0!important;font-size:16px!important;font-weight:550;line-height:1.4!important;color:var(--ink)!important}
.art-action-meta{margin:6px 0 16px!important;font-family:var(--mono);font-size:11px!important;letter-spacing:.05em;text-transform:uppercase}
.art-action .button,.art-rail-card .button{width:100%;justify-content:space-between;gap:12px;font-size:14px;min-height:46px;padding:12px 16px;white-space:nowrap}
.art-action .button{margin-top:14px}
.art-action-dl{margin:12px 0 0}
.art-action-dl>div{padding:10px 0;border-bottom:1px solid #cfdcd3}
.art-action-dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.art-action-dl dd{margin:4px 0 0;font-size:15px;line-height:1.4}
.art-action-mobile{display:none;margin-bottom:28px}

/* ---- narrower screens ---- */
@media (max-width:1180px){
  .art-grid{grid-template-columns:200px minmax(0,700px)}
  .art-hero-text,.art-cover,.art-more-inner{grid-column:2/3}
  .art-rail{display:none}
  .art-share-mobile{display:block;margin-top:28px}
  .art-action-mobile{display:block}
}
@media (max-width:900px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .art-hero-text,.art-cover,.art-more-inner,.art-end-main{grid-column:1}
  .art-hero{padding-bottom:clamp(96px,22vw,150px)}
  .art-cover{aspect-ratio:16/9}
  .art-toc{position:static;margin-bottom:32px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:4px}
  .art-toc summary{cursor:pointer;display:flex;justify-content:space-between}
  .art-toc summary::after{content:"+";font-size:16px;color:var(--ink)}
  .art-toc details[open] summary::after{content:"–"}
  .art-toc ol{margin-top:12px}
  .art-more-list{grid-template-columns:1fr}
  .art-facts{padding-left:0;border-left:0;flex-basis:100%}
  .art-byline{gap:12px}
  .art-byline .art-avatar{margin-right:0}
  .art-facts{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.art-toc a,.art-share-btn,.art-more-card{transition:none}}