/* ============ PAGE STYLES: blog-single.html ============ */

.narrow{width:min(100% - 2*var(--gutter),860px)}
.post-head{position:relative;overflow:hidden;padding:56px 0 40px;background:linear-gradient(180deg,var(--mist),#fff)}
.p-sheen{right:-80px;top:-60px;width:480px;opacity:.35}
.post-head .crumbs{color:var(--ink-3)}.post-head .crumbs a{color:var(--blue-600)}
.post-head h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:.4em 0 .5em}
.byline{display:flex;gap:14px;align-items:center}
.byline img{width:48px;height:48px}
.byline div{display:flex;flex-direction:column;line-height:1.35}
.byline b{color:var(--navy-900)}
.post-figure{margin:0 auto;max-width:1100px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.post-figure img{width:100%;aspect-ratio:16/8;object-fit:cover}
.post-figure figcaption{position:absolute;right:14px;bottom:12px;font-size:.78rem;color:#fff;background:rgba(6,16,46,.6);padding:.25em .7em;border-radius:var(--radius-pill)}
.post-body{display:grid;grid-template-columns:60px 1fr;gap:28px;padding-block:56px 80px}
.share{position:sticky;top:110px;display:grid;gap:10px;align-self:start}
.prose{font-size:1.1rem}
.dek{font-size:1.35rem;line-height:1.55;color:var(--navy-900);font-weight:600;border-left:4px solid;border-image:var(--grad-brand) 1;padding-left:20px}
.key{margin:34px 0;padding:26px;border-radius:var(--radius);background:var(--mist)}
.key h2{font-size:1.2rem}
.key dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:1rem}
.key dt{color:var(--ink-3);font-weight:600}.key dd{margin:0;font-weight:700;color:var(--navy-900)}
.read-full{position:relative;overflow:hidden;padding:30px;border-radius:var(--radius);background:var(--navy-950);color:#c9d4f1}
.rf-orb{right:-10px;top:-10px;width:70px}
.read-full{isolation:isolate}
.read-full .rf-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.18}
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.prev-next a{padding:18px 20px;border-radius:var(--radius);border:1px solid var(--line);transition:all var(--t) var(--ease)}
.prev-next a small{display:block;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.prev-next a b{font-family:var(--font-display);color:var(--navy-900);font-size:1rem;line-height:1.3}
.prev-next a:last-child{text-align:right}
.prev-next a:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
@media (max-width:700px){.post-body{grid-template-columns:1fr}.share{position:static;display:flex}.prev-next{grid-template-columns:1fr}}


/* Accordion (post FAQs), same as the home page FAQ */
.accordion{display:grid;gap:12px}
.acc-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:box-shadow var(--t),border-color var(--t)}
.acc-item:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm)}
.acc-item h3{margin:0;font-size:1.05rem}
.acc-item button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:20px 22px;cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--navy-900)}
.acc-item button:focus-visible{outline:3px solid var(--orange-500);border-radius:var(--radius)}
.acc-item .n{font-size:.85rem;color:var(--orange-500)}
.acc-item .pm{margin-left:auto;position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist-2);transition:background var(--t),transform var(--t) var(--ease)}
.acc-item .pm::before,.acc-item .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--blue-700);transition:transform var(--t)}
.acc-item .pm::after{transform:rotate(90deg)}
.acc-item button[aria-expanded="true"] .pm{background:var(--orange-500);transform:rotate(180deg)}
.acc-item button[aria-expanded="true"] .pm::before,.acc-item button[aria-expanded="true"] .pm::after{background:#fff}
.acc-item button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--t) var(--ease)}
.acc-panel p{padding:0 22px 22px 66px;margin:0;color:var(--ink-2)}