/* Blog post template (single.php). Rules moved verbatim from design/files/article-body.tpl's
   inline style, except where a comment says otherwise. The hero frame, the long-form grid,
   the contents list and the article type already live in site.css (page.php shares them). */

.hp .ameta{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;color:#0B0B0Bb3}
.hp .ameta span{display:inline-flex;gap:7px;align-items:center}
.hp .ameta .cats{gap:6px}
.hp .ameta svg{width:16px;height:16px;color:var(--deep)}
.hp .ameta .by{gap:9px;color:var(--ink);font-weight:500}
.hp .ameta .by img{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);padding:4px}
.hp .fimg{max-width:1080px;margin:0 auto;padding:0 32px;position:relative}
.hp .fimg img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:18px;display:block;border:1px solid var(--line)}
/* wp_get_attachment_image prints width and height, and the height attribute would beat aspect-ratio. */
.hp .fimg img{height:auto}
/* A banner wider than 2:1 (um_wide) shows whole, as the mockup's .ph.wide cards do. */
.hp .fimg.wide img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
/* The mockup gates this on prefers-reduced-motion; .js is the theme's equivalent (site.css hero entrance).
   Speed (as Ruling R8). The image is the LCP element, and Chrome reports an element that fades in from
   opacity 0 only when its fade ends, which put the applied LCP at 3.3s on a phone. It enters with the
   H1's mask reveal (site.css um-mask) instead, which paints from the first frame, at the mockup's delay. */
.js .hp .fimg{animation:um-mask 1s .75s cubic-bezier(.16,1,.3,1) backwards}

/* The live site's inline SVG charts use Next.js font variables. site.css maps them on .article. */
.hp .article figure svg text{font-family:Satoshi,sans-serif}
/* Imported core/image figures lost the live site's inline 16px image radius. */
.hp .article figure img{border-radius:16px}

.hp .share{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.hp .share .eyebrow{margin-bottom:10px}
.hp .share div{display:flex;gap:8px}
.hp .share button{all:unset;cursor:pointer;width:42px;height:42px;border-radius:12px;border:1px solid #0B0B0B26;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,background .2s;position:relative}
.hp .share button svg{width:18px;height:18px}
.hp .share button:hover{border-color:var(--green);color:var(--deep)}
.hp .share button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .share button.done{background:var(--green);border-color:var(--green);color:var(--ink)}
.hp .share small{display:block;font-size:12.5px;color:#0B0B0B99;margin-top:8px;min-height:18px}
.hp .endnote{max-width:680px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:#0B0B0B99}
.prog{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}

/* introducing-unrivaled-access ends with the live site's inline CTA link, #7cb342 with white
   text (2.4:1). It takes the brand primary button colours instead (green with ink text). */
.hp .article a[style*="#7cb342"]{background:var(--green)!important;color:var(--ink)!important}

@media (max-width:900px){.hp .fimg{padding:0 16px}.hp .fimg img{aspect-ratio:16/10}.hp .fimg.wide img{aspect-ratio:auto}}