/* Blog article pages (blog/<slug>.html), design B "magazine" (Greg's pick 2026-10-16; mockup:
   nicolekolenda-extras/blog-article-mockups/B.html). Loaded after site.css on article pages only.
   Header: the post's own photo beside a peach title panel; a "Key takeaways" card overlapping it; a sticky
   "In this article" rail (desktop) / "Jump to section" menu (phones); article text in Source Sans 3. */

/* Light surfaces that stay light in dark mode, like printed cards (same tokens as .card in site.css). */
.ka,.ar-photo--fit{--ink:#353535;--ink-strong:#1A1A1A;--ink-soft:#5E5249;--accent:#F05100;--accent-text:#B02A04;--line:#E8D7C6;--line-strong:#B9A898;--bg:#FFF3E8;--panel:#FFFFFF;--hi:#FBE3AE;--focus:#112337;color:var(--ink)}

/* reading progress along the bottom of the menu bar (added by article.js) */
.ar-prog{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---- header: photo half + title panel on peach ---- */
.ar-hero{position:relative;background:var(--peach)}
.ar-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);max-width:1500px;margin-inline:auto}
.ar-photo{position:relative;min-height:clamp(420px,42vw,600px);margin:0;background:var(--linen)}
.ar-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ar-photo::after{content:"";position:absolute;inset:16px;border:1px solid rgba(255,243,232,.8);pointer-events:none}
/* a graphic or a small picture: shown whole, never stretched past its own pixels */
.ar-photo--fit{display:grid;place-items:center;padding:clamp(28px,4vw,56px);background:#FFFFFF}
.ar-photo--fit img{position:static;width:auto;height:auto;max-height:clamp(300px,34vw,500px);object-fit:contain}
.ar-photo--fit::after{border-color:var(--gold)}
/* a video post: the post's own YouTube video, framed */
.ar-photo--video{display:grid;align-content:center;padding:clamp(22px,3.4vw,52px);background:#2A211C}
.ar-photo--video::after{border-color:rgba(240,197,106,.45)}
.ar-vid{position:relative;z-index:1;aspect-ratio:16/9;width:100%;background:#000;box-shadow:var(--off) var(--off) 0 var(--gold)}
.ar-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:600px){.ar-photo--video{padding:18px 26px 26px 18px}.ar-photo--video::after{display:none}.ar-vid{box-shadow:8px 8px 0 var(--gold)}}
.ar-panel{position:relative;z-index:1;display:grid;align-content:center;justify-items:start;gap:18px;padding:clamp(36px,5vw,64px) clamp(22px,5vw,72px) clamp(64px,7vw,96px);max-width:660px}
.ar-hero--ka .ar-panel{padding-bottom:clamp(96px,9vw,124px)}
.ar-panel .crumbs{display:flex;gap:10px;margin:0;font:400 .75rem/1.4 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.ar-panel .crumbs a{color:inherit;text-decoration:none}
.ar-panel .crumbs a:hover{color:var(--accent-text)}
.ar-panel h1{font:italic 400 clamp(1.85rem,1.2rem + 2vw,2.85rem)/1.16 var(--serif);color:var(--ink-strong);overflow-wrap:normal}
.ar-panel .deck{font:italic 400 clamp(1.05rem,1rem + .3vw,1.2rem)/1.6 var(--serif);color:var(--ink-soft);max-width:42ch}
.ar-by{display:flex;align-items:center;gap:12px;font:400 .9rem/1.45 var(--sans);color:var(--ink-soft)}
.ar-by img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--peach),0 0 0 4px var(--gold)}
.ar-by b{display:block;color:var(--ink-strong);font-weight:600}
.ar-hero .ink{position:absolute;right:0;bottom:40px;width:min(46%,680px);height:46px;color:var(--gold);pointer-events:none}
.ar-hero--ka .ink{bottom:68px}
.ar-hero .ink path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .ar-hero-in{grid-template-columns:minmax(0,1fr)}
  .ar-photo{min-height:0;aspect-ratio:4/3}
  .ar-photo::after{inset:10px}
  .ar-photo--fit,.ar-photo--video{aspect-ratio:auto}
  .ar-photo--fit img{max-height:300px}
  .ar-panel{max-width:none;padding-top:28px}
  .ar-hero .ink{width:100%;bottom:30px}
  .ar-hero--ka .ink{bottom:56px}
}

/* ---- "In 30 seconds" key takeaways, overlapping the header ---- */
.ka-wrap{position:relative;z-index:2;margin-top:-56px}
.ka{position:relative;display:grid;grid-template-columns:190px repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,34px);align-items:start;background:#FFFFFF;padding:clamp(24px,3vw,36px) clamp(22px,3.4vw,44px);box-shadow:var(--off) var(--off) 0 var(--gold)}
.ka::after{content:"";position:absolute;inset:10px;border:1px solid var(--accent);pointer-events:none}
.ka > *{position:relative;z-index:1}
.ka h2{font:italic 400 1.5rem/1.2 var(--serif);margin-top:6px;color:var(--ink-strong)}
.ka ol{display:contents}
.ka li{display:grid;gap:8px;font:400 1rem/1.55 var(--sans);color:var(--ink)}
.ka li .n{font:italic 400 1.6rem/1 var(--serif);color:var(--accent)}
@media (max-width:960px){.ka{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ka > div:first-child{grid-column:1/-1}}
@media (max-width:640px){.ka-wrap{margin-top:-40px}.ka{grid-template-columns:minmax(0,1fr);gap:16px}.ka li{grid-template-columns:30px minmax(0,1fr);gap:10px}.ka li .n{font-size:1.3rem}}

/* ---- the article column, with the contents rail on wide screens ---- */
.ar-main{display:grid;grid-template-columns:230px minmax(0,38rem);gap:clamp(40px,6vw,96px);justify-content:center;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding:clamp(48px,6vw,76px) var(--gut) 0}
.ar-main--solo{grid-template-columns:minmax(0,40rem)}
.ar-toc-in{position:sticky;top:112px;display:grid;gap:14px;max-height:calc(100vh - 128px);overflow-y:auto;scrollbar-width:thin;padding:2px 4px 8px 2px}
.ar-toc ol{display:grid;border-left:1px solid var(--line);counter-reset:t}
.ar-toc ol a{display:grid;grid-template-columns:24px 1fr;padding:8px 0 8px 14px;margin-left:-1px;border-left:2px solid transparent;font:400 .95rem/1.4 var(--sans);color:var(--ink-soft);text-decoration:none;transition:color .2s,border-color .2s}
.ar-toc ol a::before{counter-increment:t;content:counter(t);font:italic 400 .9rem/1.5 var(--serif);color:var(--accent-text)}
.ar-toc ol a:hover{color:var(--ink-strong)}
.ar-toc ol a.on{border-left-color:var(--accent);color:var(--ink-strong);font-weight:600}
.ar-meter{display:grid;gap:8px;margin-top:4px}
.ar-bar{height:3px;background:var(--line);position:relative;overflow:hidden;border-radius:3px}
.ar-bar span{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.ar-rt{font:400 .8125rem/1.4 var(--sans);color:var(--ink-soft)}
.ar-toc-share .share{border:0;padding:6px 0 0;gap:10px}
.ar-toc-share .share-row{gap:6px}
.ar-toc-share .sh{width:38px;height:38px}
.ar-toc-share .sh--pill{width:auto}
.ar-jump{display:none;border:1px solid var(--line-strong);background:var(--panel);margin-bottom:34px}
.ar-jump summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 18px;font:400 .8125rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-strong)}
.ar-jump summary::-webkit-details-marker{display:none}
.ar-jump summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.ar-jump[open] summary::after{transform:rotate(225deg)}
.ar-jump ol{padding:0 18px 10px;display:grid;counter-reset:j}
.ar-jump a{display:grid;grid-template-columns:26px 1fr;padding:12px 0;border-top:1px solid var(--line);font:400 1rem/1.4 var(--sans);text-decoration:none;color:var(--ink)}
.ar-jump a::before{counter-increment:j;content:counter(j);font:italic 400 .95rem/1.4 var(--serif);color:var(--accent-text)}
@media (max-width:980px){
  .ar-main{grid-template-columns:minmax(0,38rem)}
  .ar-toc{display:none}
  .ar-jump{display:block}
}

/* ---- the text ---- */
.ar-body{font:400 1.1875rem/1.75 var(--sans);color:var(--ink);min-width:0}
.ar-body > p,.ar-body > .ar-ul,.ar-body > .ar-ol{margin:0 0 1.15em}
.ar-body a:not(.btn):not(.sh):not(.share-ig){color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ar-body a:not(.btn):not(.sh):not(.share-ig):hover{color:var(--ink-strong)}
.ar-body strong{font-weight:600;color:var(--ink-strong)}
.ar-body sup{line-height:0}
.ar-h{font:italic 400 clamp(1.45rem,1.25rem + .8vw,1.9rem)/1.25 var(--serif);color:var(--ink-strong);margin:clamp(40px,5vw,56px) 0 18px;scroll-margin-top:110px}
.ar-h:not(.ar-h--n)::before{content:"";display:block;width:44px;height:2px;background:var(--gold);margin-bottom:16px}
.ar-body > .ar-h:first-child{margin-top:0}
.ar-h--n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.ar-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:#1A1A1A;font:italic 400 1.25rem/1 var(--serif);margin-top:-4px}
.ar-lede{font:italic 400 clamp(1.15rem,1.05rem + .4vw,1.32rem)/1.6 var(--serif);color:var(--ink-strong);margin:0 0 1.2em}
.ar-note{font:italic 400 1rem/1.6 var(--serif);color:var(--ink-soft);border-left:2px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 1.6em}
.ar-ul,.ar-ol{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ar-ul > li{position:relative;padding-left:28px}
.ar-ul > li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.ar-ol{counter-reset:o}
.ar-ol > li{position:relative;padding-left:44px;counter-increment:o}
.ar-ol > li::before{content:counter(o);position:absolute;left:0;top:.05em;width:30px;text-align:right;font:italic 400 1.35rem/1.3 var(--serif);color:var(--accent)}
.ar-body li .ar-ul{margin-top:10px}
.ar-lead{display:inline;font:400 1.12em/1.45 var(--serif);color:var(--accent-text)}
.ar-lead strong{font-weight:400;color:inherit}
.ar-rem{font:italic 400 clamp(1.12rem,1.04rem + .35vw,1.28rem)/1.65 var(--serif);color:var(--ink-strong);background:var(--peach);padding:22px 26px;border-left:3px solid var(--accent);margin:clamp(26px,3vw,36px) 0}
.ar-rem b{font-weight:400;color:var(--accent-text)}
.ar-foot{font:400 .95rem/1.6 var(--sans);color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px;margin-top:2em}
.ar-pq{position:relative;margin:34px 0 38px;padding-left:60px}
.ar-pq::before{content:"\201C";position:absolute;left:-4px;top:-26px;font:400 6.2rem/1 var(--serif);color:var(--gold)}
.ar-pq p{font:italic 400 clamp(1.3rem,1.12rem + .75vw,1.65rem)/1.45 var(--serif);color:var(--ink-strong);margin:0}
.ar-sep{border:0;height:1px;width:40%;margin:2.2em auto;background:var(--accent);opacity:.6}
.ar-xref{margin:-.3em 0 1.4em}
.ar-xref a{display:inline-flex;gap:10px;align-items:baseline;font:italic 400 1.05rem/1.45 var(--serif)}
.ar-xref a::before{content:"\2192";font-style:normal;text-decoration:none;display:inline-block}
.ar-further{display:grid;gap:6px;background:var(--panel);border:1px solid var(--line);padding:22px 26px;margin-top:2em}
.ar-further .eyebrow + .ar-further-t{margin-bottom:12px}
.ar-further-t{font:italic 400 1.15rem/1.45 var(--serif)}
.ar-further-t span{font:400 .95rem/1.4 var(--sans);font-style:normal;color:var(--ink-soft)}

/* pictures in the text: never wider than their own pixels */
.ar-fig{margin:clamp(28px,3vw,40px) 0;position:relative}
.ar-fig img{width:auto;max-width:100%;box-shadow:12px 12px 0 var(--gold)}
@media (max-width:600px){.ar-fig img{box-shadow:8px 8px 0 var(--gold)}}
.ar-float{float:left;max-width:min(40%,305px);height:auto;margin:6px 22px 12px 0}
.ar-h{clear:both}
.ar-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:clamp(28px,3vw,40px) 0}
.ar-gallery img{width:100%;aspect-ratio:2/3;object-fit:cover}
@media (min-width:1240px){.ar-gallery{margin-inline:-60px}}
/* photo + mustard panel (her two-column rows) */
.ar-duo{display:grid;margin:clamp(34px,4vw,52px) 0;clear:both}
.ar-duo-ph{position:relative;z-index:1;margin:0 0 0 22px;justify-self:start;max-width:62%}
.ar-duo-ph img{width:auto;max-width:100%;box-shadow:10px 10px 0 rgba(26,26,26,.12)}
.ar-duo--rev .ar-duo-ph{order:2;margin:-44px 22px 0 0;justify-self:end}
.ar-duo-tx{margin-top:-48px;padding:72px clamp(22px,4vw,40px) clamp(24px,3vw,34px)}
.ar-duo--rev .ar-duo-tx{order:1;margin-top:0;padding:clamp(26px,4vw,40px) clamp(22px,4vw,40px) 70px}
.ar-callout{font:400 clamp(1.12rem,1.02rem + .4vw,1.3rem)/1.5 var(--serif);color:#1A1A1A;margin:0}
.ar-duo-tx p{margin:0}
.ar-duo-tx p + p{margin-top:.8em}
.ar-qs li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid rgba(26,26,26,.16)}
.ar-qs li:first-child{border-top:0;padding-top:0}
.ar-qs .n{width:44px;height:44px;border-radius:50%;background:#FFF3E8;display:grid;place-items:center;font:italic 400 1.2rem/1 var(--serif);color:#B02A04}
.ar-qs li p{font:400 clamp(1.08rem,1rem + .35vw,1.25rem)/1.45 var(--serif);color:#1A1A1A;padding-top:8px}
@media (min-width:1240px){.ar-duo:not(.ar-duo--pq){margin-right:-120px}}
@media (max-width:600px){.ar-duo:not(.ar-duo--pq){margin-inline:calc(-1*var(--gut))}.ar-duo-ph{margin-left:var(--gut);max-width:75%}.ar-duo--rev .ar-duo-ph{margin-right:var(--gut)}}
/* photo + pull quote side by side */
.ar-duo--pq{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(22px,3vw,36px);align-items:center}
.ar-duo--pq .ar-duo-ph{margin:0;max-width:100%}
.ar-duo--pq .ar-duo-ph img{box-shadow:12px 12px 0 var(--gold)}
.ar-duo--pq .ar-pq{margin:24px 0 0}
@media (max-width:560px){.ar-duo--pq{grid-template-columns:minmax(0,1fr)}.ar-duo--pq .ar-duo-ph{max-width:75%}}

/* ---- end of the article: share, author ---- */
.ar-end{margin-top:clamp(40px,5vw,56px);clear:both}
.ar-author{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(22px,3vw,36px);align-items:center;margin-top:clamp(40px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.ar-author figure{margin:0}
.ar-author img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 30%;box-shadow:12px 12px 0 var(--gold)}
.ar-author h2{font:italic 400 1.45rem/1.3 var(--serif);margin:6px 0 10px;color:var(--ink-strong)}
.ar-author .bio{font:400 1.02rem/1.6 var(--sans);color:var(--ink-soft);margin:0 0 18px}
.ar-author .btns{gap:10px}
@media (max-width:600px){.ar-author{grid-template-columns:110px minmax(0,1fr);align-items:start}.ar-author .btn{min-height:44px;padding:11px 16px}}
@media (max-width:420px){.ar-author{grid-template-columns:minmax(0,1fr)}.ar-author figure{max-width:160px}}

/* ---- free guide band (mustard, full width; the form sends nothing on /demo/) ---- */
.ar-nl{margin-top:clamp(64px,7vw,96px);padding-block:clamp(40px,5vw,64px)}
.ar-nl .guide{grid-template-columns:110px minmax(0,1fr) minmax(0,1.05fr)}
.ar-nl .guide .img{width:110px;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.ar-nl .guide:hover .img{transform:rotate(0) scale(1.04)}
.ar-nl .guide-tx h2{font:400 1.3rem/1.3 var(--serif);color:#1A1A1A}
.ar-nl .input{border-color:rgba(26,26,26,.35);background:#FFFFFF;color:#1A1A1A}
@media (max-width:860px){.ar-nl .guide{grid-template-columns:72px minmax(0,1fr)}.ar-nl .guide .img{width:72px}}

/* ---- read next ---- */
.ar-rn{padding-block:clamp(52px,6vw,80px) clamp(56px,7vw,88px)}
.rn{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);align-items:start}
.rn .posts{grid-template-columns:minmax(0,1fr)}
.rn .post h3{font-size:1.45rem}
.rn-side{display:grid;gap:22px}
.rn-mini{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;text-decoration:none;padding-bottom:22px;border-bottom:1px solid var(--line)}
.rn-mini:last-child{border-bottom:0}
.rn-mini img,.rn-mini .soon{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s,box-shadow .3s}
.rn-mini .soon{padding:10%}
.rn-mini .soon .soon-t{font-size:.85rem}
.rn-mini:hover img{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--gold)}
.rn-mini .k{font:400 .6875rem/1.4 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.rn-mini h3{font:italic 400 1.08rem/1.35 var(--serif);margin-top:6px}
.rn-mini:hover h3{color:var(--accent-text)}
@media (max-width:760px){.rn{grid-template-columns:minmax(0,1fr)}.rn-mini{grid-template-columns:110px minmax(0,1fr)}}

/* ---- print: just the article ---- */
@media print{
  :root:root:root{--bg:#fff;--panel:#fff;--peach:#fff;--linen:#f3f3f3;--ink:#222;--ink-strong:#000;--ink-soft:#444;--line:#ccc;--line-strong:#999;--accent:#B02A04;--accent-text:#B02A04;color-scheme:light}
  body{background:#fff;color:#000}
  .skip,.ribbon,.hdr,.ftr,.ar-toc,.ar-jump,.ar-end,.ar-nl,.ar-rn,.ar-author .btns,.ar-hero .ink,.ar-prog,.ar-photo--video{display:none!important}
  .ar-hero{background:none}
  .ar-hero-in{display:block}
  .ar-photo{min-height:0;aspect-ratio:auto;max-width:55%;margin:0 0 12px}
  .ar-photo::after{display:none}
  .ar-photo img{position:static;height:auto}
  .ar-panel{padding:0;max-width:none}
  .ka-wrap{margin-top:16px;padding:0}
  .ka{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .ka::after{display:none}
  .ar-main{display:block;padding:24px 0 0;max-width:none}
  .ar-body{font-size:11.5pt;line-height:1.55}
  .ar-h{break-after:avoid}
  .ar-fig,.ar-duo,.ar-gallery,.ar-pq,.ar-rem{break-inside:avoid}
  .ar-fig img,.ar-duo-ph img,.ar-author img{box-shadow:none}
  .ar-duo-tx{background:#fff!important;border:1px solid #999}
  .ar-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555;word-break:break-all}
  .ar-author{grid-template-columns:90px 1fr;break-inside:avoid}
}