/* article.css - shared, inherited by every /insights article. Professional article layout (eightx-style): a clean light HEADER (title block), the featured IMAGE as its own separate block (text is never overlaid on it), then a two-column body with a sticky right rail (On this page + CTA), author card, related grid, in-article components, and scroll animations. Progressive enhancement: animation/scroll-spy states are gated on , so with JavaScript disabled everything renders in its final, readable state. */ /* ============ Article header (title block, separated from the image) ============ */ .article-head{padding:46px 0 24px} .article-head .pill{display:inline-block;background:var(--sage);color:var(--cream); font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:999px} .article-head h1{margin:16px 0 0;overflow-wrap:break-word} .article-head .byline{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:16px;color:var(--ink-soft);font-size:.95rem} .article-head .byline .by-name{color:var(--deep);font-weight:600;text-decoration:none} .article-head .byline .by-name:hover{text-decoration:underline} .article-head .byline .dot{opacity:.4} /* ============ "Read with AI" pills (light) ============ */ .ai-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px} .ai-row .ai-label{font-size:.9rem;color:var(--ink-soft);font-weight:600;margin:0 2px 0 0} .ai-btn{display:inline-flex;align-items:center;gap:8px;background:var(--paper); border:1px solid var(--sand);color:var(--deep);padding:8px 15px;border-radius:999px; font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .15s ease, box-shadow .15s ease} .ai-btn:hover{border-color:var(--sage);box-shadow:0 1px 6px rgba(27,36,26,.08)} .ai-btn .ai-ico{width:16px;height:16px;flex:none} /* ============ Featured image (separate block) ============ */ .article-feature{margin:0 0 6px} .article-feature .feature-frame{position:relative;border-radius:var(--radius);overflow:hidden; aspect-ratio:16/9;background:var(--deep)} .article-feature .feature-img{width:100%;height:100%;object-fit:cover;display:block} .article-feature .feature-watermark{position:absolute;bottom:16px;right:16px;width:46px;height:46px; border-radius:10px;opacity:.72;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55));pointer-events:none} /* ============ Two-column layout + sticky rail ============ */ .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px; max-width:1160px;margin:0 auto;padding:40px 24px 8px;align-items:start} .article-content{min-width:0} .article-content .wrap,.article-content .wrap-narrow{max-width:none;margin:0;padding:0} .article-content > section{padding-top:0;padding-bottom:40px} .article-content > section:first-of-type{padding-top:0} .article-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:22px} @media (max-width:980px){ .article-head{padding:32px 0 18px} .article-layout{grid-template-columns:minmax(0,1fr);gap:0;padding:28px 20px 4px} .article-rail{position:static;order:2;margin-top:26px;gap:22px} /* rail drops below content on mobile */ main#main{overflow-x:hidden} .num-table{min-width:0} .article-content img,.article-content pre,.article-content table{max-width:100%} } /* ============ On this page navigator ============ */ .onthispage .otp-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sage);font-weight:700;margin:0 0 10px} .onthispage ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--sand)} .onthispage li a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent; color:var(--ink-soft);text-decoration:none;font-size:.9rem;line-height:1.35} .onthispage li a:hover{color:var(--ink)} .onthispage li a.active{color:var(--deep);border-left-color:var(--sage);font-weight:600} @media (max-width:980px){ .onthispage{display:none} } /* ============ Rail CTA card ============ */ .rail-cta{background:var(--deep);color:var(--cream);border-radius:var(--radius);padding:24px} .rail-cta .eyebrow{color:var(--sage-lt);margin-top:0} .rail-cta h3{color:var(--cream);font-family:var(--display);font-size:1.3rem;margin:6px 0 8px} .rail-cta p{color:var(--mint);font-size:.92rem;line-height:1.5;margin:0 0 16px} .rail-cta .btn{display:block;width:100%;text-align:center} /* ============ End-of-article: author + related ============ */ .article-end{max-width:1160px;margin:0 auto;padding:8px 24px 8px} .author-card{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .author-card img{border-radius:50%;object-fit:cover;width:84px;height:84px;flex:none} .author-card .a-name{font-family:var(--display);font-size:1.15rem;font-weight:600} .related h2{margin-bottom:6px} .related .rel-empty{color:var(--ink-soft);font-size:.95rem} /* ============ In-article components (shared) ============ */ .table-wrap{overflow-x:auto;margin:30px 0 10px} .num-table{width:100%;border-collapse:collapse;font-size:1rem;min-width:420px} .num-table caption{font-family:var(--display);font-weight:600;text-align:left;font-size:1.05rem;margin-bottom:12px;color:var(--deep)} .num-table th,.num-table td{padding:11px 14px;border-bottom:1px solid rgba(27,36,26,.12);text-align:left} .num-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .num-table tr.total td{border-top:2px solid var(--deep);border-bottom:none;font-weight:700} .num-table tr.total td.neg{color:#9a2f2f} .num-table td.sub{color:var(--sage);font-size:.88rem} .eq-box{background:var(--deep);color:var(--cream);border-radius:var(--radius);padding:30px 24px;text-align:center} .eq-box .eq{font-family:var(--display);font-size:clamp(1.25rem,4.5vw,1.9rem);margin:0} .eq-box .eq-labels{display:flex;gap:14px 34px;justify-content:center;flex-wrap:wrap;margin-top:16px;color:var(--sage-lt);font-size:.95rem} .eq-box .eq-note{margin:14px 0 0;color:var(--mint);font-size:.85rem} .callout{border-left:4px solid var(--sage-lt);background:rgba(146,169,143,.14);padding:18px 22px;border-radius:0 12px 12px 0;margin:28px 0} .callout .callout-label{font-family:var(--display);font-weight:700;margin:0 0 6px} .callout p:last-child{margin-bottom:0} .code-wrap{position:relative;margin:18px 0} .code-wrap pre{white-space:pre-wrap;font-size:.9rem;line-height:1.55;background:var(--deep);color:var(--cream);padding:22px 20px;border-radius:12px;overflow-x:auto;margin:0} .copy-btn{position:absolute;top:12px;right:12px;background:var(--sage-lt);color:var(--deep);border:0;border-radius:7px;padding:7px 13px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--body)} .copy-btn:hover{background:var(--mint)} .funnel{list-style:none;padding:0;margin:0} .funnel li{padding:11px 0 11px 34px;position:relative;border-bottom:1px solid rgba(27,36,26,.1)} .funnel li:last-child{border-bottom:none} .funnel li::before{content:"\2713";position:absolute;left:4px;top:11px;color:var(--sage);font-weight:700} /* ============ Scroll-reveal states (JS-gated; reduced-motion safe) ============ */ html.js .reveal{opacity:0;transform:translateY(16px)} html.js .reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s ease} html.js .anim-table tbody tr{opacity:0;transform:translateY(8px)} html.js .anim-table tbody tr.in{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease} html.js .anim-funnel li::before{opacity:0} html.js .anim-funnel li.in::before{opacity:1;transition:opacity .35s ease} @media (prefers-reduced-motion: reduce){ html.js .reveal,html.js .anim-table tbody tr,html.js .anim-funnel li::before{ opacity:1 !important;transform:none !important;transition:none !important} }