/* ================================================================== post-v2.css — the "reading journey" template for blog posts. Shared by every v2 post, so a design change is made once. Loaded after site-theme.css and blog-kit.css (blog-kit's manifest `stylesheets`), so it wins where they overlap. All content stays server-rendered HTML; everything interactive here is an enhancement driven by post-v2.js. Themes: light is the site default. Dark is opt-in per reader and set on before first paint. ================================================================== */ :root{ --p-paper:#ffffff;--p-paper-2:#f6f8f7;--p-ink:#03140F;--p-head:#06140F;--p-text:#26332E;--p-muted:#5f6f68; --p-line:rgba(15,23,42,.1);--p-line-2:rgba(15,23,42,.16); --p-accent:#059669;--p-accent-2:#10b981;--p-accent-soft:#e7f8f0;--p-lime:#d9f99d; --p-rose:#be123c;--p-rose-soft:#fff1f2;--p-amber:#b45309; --p-code:#0b1f18;--p-mark:rgba(16,185,129,.18); --p-aurora:linear-gradient(100deg,#047857 0%,#10b981 40%,#34d399 70%,#84cc16 100%); --p-serif:'Newsreader',Georgia,'Times New Roman',serif; --p-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --p-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace; --p-read:20px;--p-ease:cubic-bezier(.2,.8,.2,1); } html[data-size="s"]{--p-read:18px} html[data-size="l"]{--p-read:22px} html[data-theme="dark"]{ color-scheme:dark; --p-paper:#0f1a16;--p-paper-2:#132019;--p-ink:#e7f3ed;--p-head:#f2f8f5;--p-text:#cfdcd5;--p-muted:#8ea69a; --p-line:rgba(255,255,255,.08);--p-line-2:rgba(255,255,255,.14); --p-accent:#34d399;--p-accent-2:#6ee7b7;--p-accent-soft:rgba(52,211,153,.1); --p-rose:#fb7185;--p-rose-soft:rgba(251,113,133,.08);--p-amber:#fbbf24; --p-code:#07100d;--p-mark:rgba(52,211,153,.2); } html[data-theme="dark"],html[data-theme="dark"] body,html[data-theme="dark"] body[class]{ background-color:#0a1210;background-image:radial-gradient(at 12% 8%,rgba(16,185,129,.1) 0,transparent 45%),radial-gradient(at 88% 12%,rgba(13,148,136,.08) 0,transparent 45%); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body.p2{margin:0;padding-top:96px;color:var(--p-text);font-family:var(--p-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:color .4s} .p2 img{display:block;max-width:100%;height:auto} .p2 a{color:var(--p-accent);text-decoration-thickness:1px;text-underline-offset:3px} .p2 ::selection{background:rgba(16,185,129,.3)} .p2 :focus-visible{outline:2px solid var(--p-accent-2);outline-offset:3px;border-radius:6px} /* ---------------- hero ---------------- */ .p2-main{position:relative} .p2-hero{width:min(100% - 32px,860px);margin:26px auto 0;text-align:center} .p2-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px;font:600 13px var(--p-sans);color:var(--p-muted)} .p2-crumbs a{color:var(--p-muted);text-decoration:none} .p2-crumbs a:hover{color:var(--p-accent)} .p2-crumbs span:last-child{color:var(--p-head)} .p2 .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--p-accent-soft);border:1px solid rgba(16,185,129,.3); font:700 11.5px var(--p-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-accent)} .p2-hero h1{margin:22px 0 0;font:800 clamp(34px,5.4vw,64px)/1.03 var(--p-sans);letter-spacing:-.045em;color:var(--p-head);text-wrap:balance} .p2-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em} .p2-hero h1 .w>span{display:inline-block;animation:p2Up 1s var(--p-ease) both} @keyframes p2Up{from{transform:translateY(105%) rotate(3deg)}to{transform:none}} .p2-hero .standfirst{max-width:720px;margin:22px auto 0;font:400 clamp(19px,1.8vw,23px)/1.55 var(--p-serif);color:var(--p-muted);text-wrap:pretty} .p2-hero .byline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:28px;padding:10px 18px 10px 10px;border-radius:999px; background:var(--p-paper);border:1px solid var(--p-line);box-shadow:0 12px 30px -20px rgba(3,20,15,.35);font-size:14px;color:var(--p-muted);text-align:left} .p2-hero .byline img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover} .byline__who{display:flex;flex-direction:column;line-height:1.3} .byline__who a{color:var(--p-head);text-decoration:none} .byline__who small{font-size:12px;color:var(--p-muted)} .byline__meta{display:flex;align-items:center;gap:10px} .p2 .dot{width:4px;height:4px;border-radius:50%;background:var(--p-line-2)} .p2-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px;font:500 13px var(--p-mono);color:var(--p-muted)} .p2-stats b{font:700 15px var(--p-sans);color:var(--p-head);margin-right:4px} .p2-evidence{display:inline-flex;align-items:center;gap:10px} .p2-evidence__bar{display:flex;width:120px;height:8px;border-radius:9px;overflow:hidden;background:var(--p-line)} .p2-evidence__bar i{display:block;height:100%} .p2-evidence__bar i.-c{background:#10b981}.p2-evidence__bar i.-o{background:#3b82f6}.p2-evidence__bar i.-r{background:#f59e0b}.p2-evidence__bar i.-s{background:#f43f5e} .p2-evidence button{border:0;background:none;padding:0;cursor:help;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px} .p2-evtip{position:absolute;z-index:80;width:250px;padding:12px 14px;border-radius:14px;background:var(--p-ink);color:#e7f3ed;font:500 12.5px/1.5 var(--p-sans);text-align:left; box-shadow:0 20px 40px -18px rgba(0,0,0,.5)} html[data-theme="dark"] .p2-evtip{background:#1c2b25} .p2-evtip p{margin:4px 0 0;display:flex;justify-content:space-between;gap:10px} .p2-depth{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:28px auto 0;padding:6px;border-radius:22px;width:max-content;max-width:100%; background:var(--p-paper);border:1px solid var(--p-line)} .p2-depth__lbl{padding:0 10px 0 12px;font:600 11.5px var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-muted)} .p2-depth button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 16px;border:0;border-radius:16px;background:none;cursor:pointer;color:var(--p-head); font:inherit;text-align:left;transition:background .3s,color .3s,transform .3s var(--p-ease)} .p2-depth button b{font:700 14.5px var(--p-sans)} .p2-depth button small{font-size:11.5px;color:var(--p-muted)} .p2-depth button:hover{background:var(--p-accent-soft)} .p2-depth button[aria-pressed="true"]{background:var(--p-ink);color:#fff} html[data-theme="dark"] .p2-depth button[aria-pressed="true"]{background:var(--p-accent);color:#03140F} .p2-depth button[aria-pressed="true"] small{color:rgba(255,255,255,.7)} html[data-theme="dark"] .p2-depth button[aria-pressed="true"] small{color:rgba(3,20,15,.7)} .js .p2-depth[hidden]{display:none} .js .p2-depth{display:flex} /* ---------------- hero figure + share rail (generated by blog-kit) ---------------- */ .p2 .heroFig{width:min(100% - 32px,1100px);margin:42px auto 0;perspective:1400px} .p2 .heroFig img{width:100%;border-radius:28px;border:0;box-shadow:0 50px 100px -50px rgba(3,20,15,.5);will-change:transform} .p2 .heroFig figcaption{margin-top:12px;font:italic 400 15px var(--p-serif);color:var(--p-muted);text-align:center} .p2 .rail{width:min(100% - 32px,1100px);margin:22px auto 0} .p2 .railBox{background:var(--p-paper);border-color:var(--p-line)} html[data-theme="dark"] .p2 .railBox h2,html[data-theme="dark"] .p2 .railBox p{color:var(--p-text)} html[data-theme="dark"] .p2 .share_button,html[data-theme="dark"] .p2 .ai_button{background:var(--p-paper-2);border-color:var(--p-line-2);color:var(--p-text)} /* ---------------- layout ---------------- */ .p2-grid{position:relative;display:grid;grid-template-columns:minmax(0,720px);justify-content:center;gap:56px;width:min(100% - 32px,1240px);margin:56px auto 0} @media (min-width:1180px){.p2-grid{grid-template-columns:220px minmax(0,720px) 64px}} .p2-col{min-width:0} /* chapter map */ .p2-map{display:none} @media (min-width:1180px){.p2-map{display:block}} .p2-map__in{position:sticky;top:110px} .p2-map__h{margin:0 0 12px;font:600 11.5px var(--p-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)} .p2-map__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:ch} .p2-map__list li{counter-increment:ch} .p2-map__list a{position:relative;display:grid;grid-template-columns:28px 1fr;gap:6px;padding:8px 10px 8px 8px;border-radius:12px;text-decoration:none; font:600 13.5px/1.35 var(--p-sans);color:var(--p-muted);overflow:hidden;transition:color .3s,background .3s} .p2-map__list a::before{content:counter(ch,decimal-leading-zero);font:600 11px/1.9 var(--p-mono);color:var(--p-muted)} .p2-map__list a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--p-aurora);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .3s} .p2-map__list a:hover{color:var(--p-head);background:var(--p-paper)} .p2-map__list a.-on{color:var(--p-head);background:var(--p-paper);box-shadow:0 10px 24px -18px rgba(3,20,15,.45)} .p2-map__list a.-on::before{color:var(--p-accent)} .p2-map__list a.-done::before{content:"✓";color:var(--p-accent)} .p2-map__left{margin:14px 0 0 8px;font:600 12px var(--p-mono);color:var(--p-accent)} /* reading tools */ .p2-tools{display:none} .js .p2-tools[hidden]{display:none} @media (min-width:1180px){ .js .p2-tools{display:flex;flex-direction:column;gap:8px;position:sticky;top:110px;align-self:start} } .p2-tool{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:10px 0 8px;border:1px solid var(--p-line);border-radius:18px;background:var(--p-paper);cursor:pointer; color:var(--p-muted);font:600 10.5px var(--p-sans);transition:color .25s,border-color .25s,transform .3s var(--p-ease),background .25s} .p2-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .p2-tool:hover{color:var(--p-head);border-color:rgba(16,185,129,.5);transform:translateY(-2px)} .p2-tool[aria-pressed="true"]{background:var(--p-ink);color:var(--p-lime);border-color:var(--p-ink)} html[data-theme="dark"] .p2-tool[aria-pressed="true"]{background:var(--p-accent);color:#03140F} .p2-tool[data-tool="listen"][aria-pressed="true"] .p2-wave{animation:p2wave 1s ease-in-out infinite} @keyframes p2wave{50%{opacity:.25}} /* phones and tablets: tools become a floating dock */ @media (max-width:1179px){ .js .p2-tools{position:fixed;left:50%;bottom:16px;z-index:70;display:flex;flex-direction:row;gap:4px;padding:6px;border-radius:999px;transform:translateX(-50%); background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--p-line);box-shadow:0 20px 40px -20px rgba(3,20,15,.45); transition:transform .45s var(--p-ease)} html[data-theme="dark"].js .p2-tools{background:rgba(15,26,22,.92)} .js .p2-tools.-away{transform:translate(-50%,140%)} .p2-tool{width:auto;flex-direction:row;padding:9px 13px;border:0;border-radius:999px;background:none;font-size:12.5px} .p2-tool svg{width:19px;height:19px} .p2-tool span{display:none} .p2-tool[data-tool="chapters"] span{display:inline} .p2 .toTop{bottom:84px} } .p2-sheet{position:fixed;left:12px;right:12px;bottom:82px;z-index:69;max-height:62vh;overflow:auto;padding:16px;border-radius:24px;background:var(--p-paper);border:1px solid var(--p-line); box-shadow:0 30px 60px -20px rgba(3,20,15,.5);transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .4s var(--p-ease),opacity .3s} .p2-sheet.-on{transform:none;opacity:1;pointer-events:auto} .p2-sheet .p2-map__list a{font-size:15px} /* ---------------- article typography ---------------- */ .p2 .post{font-family:var(--p-serif);font-size:var(--p-read);line-height:1.72;color:var(--p-text);transition:font-size .3s} .p2 .post>p,.p2 .post li,.p2 .post dd{text-wrap:pretty} .p2 .post p{margin:0 0 1.05em} .p2 .post ul,.p2 .post ol{margin:0 0 1.2em;padding-left:1.3em} .p2 .post li{margin-bottom:.45em} .p2 .post li::marker{color:var(--p-accent)} .p2 .post strong{color:var(--p-head);font-weight:600} .p2 .post a{color:var(--p-head);text-decoration:underline;text-decoration-color:rgba(16,185,129,.6);text-decoration-thickness:2px} .p2 .post a:hover{color:var(--p-accent)} .p2 .post code{font:500 .8em var(--p-mono);padding:.12em .4em;border-radius:6px;background:var(--p-accent-soft);color:var(--p-head);border:0} .p2 .post pre{margin:0 0 1.4em;padding:20px 22px;border-radius:20px;background:var(--p-code);color:#d1fae5;overflow-x:auto;font:500 14px/1.65 var(--p-mono)} .p2 .post pre code{padding:0;background:none;color:inherit;font-size:inherit} .p2 .post .answer{font-size:1.08em;line-height:1.62;color:var(--p-head);padding:18px 0 18px 22px;border-left:3px solid;border-image:var(--p-aurora) 1} /* chapter openers */ .p2 .post{counter-reset:chap} .p2 .post>h2{position:relative;counter-increment:chap;margin:2.6em 0 .7em;padding-top:1.1em;border-top:1px solid var(--p-line); font:800 clamp(27px,3.2vw,36px)/1.12 var(--p-sans);letter-spacing:-.035em;color:var(--p-head);scroll-margin-top:110px;text-wrap:balance} .p2 .post>h2::before{content:"Chapter " counter(chap,decimal-leading-zero);display:block;margin-bottom:10px;font:600 12px var(--p-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)} .p2 .post>h2::after{content:"";position:absolute;left:0;top:-1px;width:80px;height:2px;background:var(--p-aurora);transform:scaleX(var(--in,1));transform-origin:left;transition:transform 1s var(--p-ease)} .p2 .post>h2#faq::before{content:"Questions"} .p2 .post h3{margin:1.8em 0 .5em;font:700 clamp(20px,2vw,23px)/1.3 var(--p-sans);letter-spacing:-.02em;color:var(--p-head);scroll-margin-top:110px} .p2-anchor{margin-left:10px;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:var(--p-accent-soft);color:var(--p-accent); vertical-align:middle;cursor:pointer;opacity:0;transform:scale(.8);transition:.25s} .p2-anchor svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .p2 .post h2:hover .p2-anchor,.p2 .post h3:hover .p2-anchor,.p2-anchor:focus-visible{opacity:1;transform:none} /* callouts */ .p2 .box{position:relative;margin:0 0 1.5em;padding:22px 24px;border-radius:22px;border:1px solid var(--p-line);background:var(--p-paper);font-family:var(--p-sans);font-size:.84em;line-height:1.65} .p2 .box__t{display:block;margin-bottom:10px;font:700 11.5px var(--p-mono);letter-spacing:.12em;text-transform:uppercase} .p2 .box ul{margin:0;padding-left:1.2em} .p2 .box p:last-child{margin-bottom:0} .p2 .box.-tldr{background:var(--p-ink);border-color:var(--p-ink);color:#c9dbd2;box-shadow:0 40px 80px -50px rgba(3,20,15,.8)} html[data-theme="dark"] .p2 .box.-tldr{background:#07100d;border-color:rgba(52,211,153,.25)} .p2 .box.-tldr .box__t{color:var(--p-lime)} .p2 .box.-tldr strong{color:#fff} .p2 .box.-tldr li{margin-bottom:.7em} .p2 .box.-tldr li::marker{color:var(--p-lime)} .p2 .box.-key{background:var(--p-accent-soft);border-color:rgba(16,185,129,.28)} .p2 .box.-key::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--p-aurora)} .p2 .box.-key .box__t{color:var(--p-accent)} .p2 .box.-myth{background:var(--p-rose-soft);border-color:rgba(190,18,60,.22)} .p2 .box.-myth .box__t{color:var(--p-rose)} .p2 .box.-myth .box__t::before{content:"✕ ";} /* evidence labels + legend (blog-kit) */ .p2 .status{font-family:var(--p-mono);vertical-align:.12em;cursor:help} html[data-theme="dark"] .p2 .status.-confirmed{color:#6ee7b7;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)} html[data-theme="dark"] .p2 .status.-observed{color:#93c5fd;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35)} html[data-theme="dark"] .p2 .status.-reported{color:#fcd34d;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)} html[data-theme="dark"] .p2 .status.-speculation,html[data-theme="dark"] .p2 .status.-no{color:#fda4af;background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.35)} .p2 .legend{margin:0 0 1.6em;padding:18px 20px;border-radius:20px;background:var(--p-paper);border-color:var(--p-line);font-family:var(--p-sans)} .p2 .legend p{font-size:14px;color:var(--p-text)} /* tables */ .p2 .tw{position:relative;margin:0 0 1.6em;border-radius:20px;border:1px solid var(--p-line);background:var(--p-paper);overflow:auto;max-height:78vh;font-family:var(--p-sans)} .p2 table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:520px} .p2 th,.p2 td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--p-line);color:var(--p-text)} .p2 thead th{position:sticky;top:0;z-index:1;background:var(--p-paper-2);font:600 11.5px var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-muted);white-space:nowrap} .p2 th.-sort{cursor:pointer;user-select:none} .p2 th.-sort::after{content:"↕";margin-left:6px;opacity:.4} .p2 th.-asc::after{content:"↑";opacity:1;color:var(--p-accent)} .p2 th.-desc::after{content:"↓";opacity:1;color:var(--p-accent)} .p2 tbody tr{transition:background .25s} .p2 tbody tr:hover{background:var(--p-accent-soft)} .p2 tbody tr:last-child td{border-bottom:0} .p2 td:first-child{font-weight:600;color:var(--p-head)} /* checklist: tick items off, remembered per reader */ .p2 .check{margin:0 0 1.6em;padding:6px 24px 20px;border-radius:22px;background:var(--p-paper);border:1px solid var(--p-line);font-family:var(--p-sans);font-size:.82em} .p2 .check h3{margin:18px 0 8px;font:700 12px var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-accent)} .p2 .check ul{list-style:none;padding:0;margin:0} .p2 .check li{position:relative;padding:10px 0 10px 40px;margin:0;border-bottom:1px dashed var(--p-line);cursor:pointer;transition:opacity .3s} .p2 .check li:last-child{border-bottom:0} .p2 .check li::before{content:"";position:absolute;left:0;top:12px;width:24px;height:24px;border-radius:8px;border:2px solid rgba(16,185,129,.55);background:var(--p-paper);transition:.3s var(--p-ease)} .p2 .check li.-done{opacity:.55} .p2 .check li.-done strong{text-decoration:line-through;text-decoration-color:var(--p-accent)} .p2 .check li.-done::before{background:var(--p-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--p-accent);transform:scale(1.08)} .p2-checkbar{display:flex;align-items:center;gap:12px;margin:14px 0 0;font:600 12px var(--p-mono);color:var(--p-muted)} .p2-checkbar i{flex:1;height:6px;border-radius:9px;background:var(--p-line);overflow:hidden} .p2-checkbar i::after{content:"";display:block;height:100%;width:calc(var(--d,0) * 100%);background:var(--p-aurora);transition:width .5s var(--p-ease)} /* FAQ */ .p2 .post details{margin:0 0 10px;padding:0;border-radius:18px;background:var(--p-paper);border:1px solid var(--p-line);font-family:var(--p-sans);font-size:.84em;transition:box-shadow .3s} .p2 .post details[open]{box-shadow:0 0 0 1.5px rgba(16,185,129,.5)} .p2 .post summary{display:flex;justify-content:space-between;gap:14px;padding:18px 22px;cursor:pointer;list-style:none;font:700 16.5px/1.4 var(--p-sans);color:var(--p-head)} .p2 .post summary::-webkit-details-marker{display:none} .p2 .post summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--p-accent-soft);color:var(--p-accent);font-size:20px;line-height:1;transition:transform .4s var(--p-ease)} .p2 .post details[open] summary::after{transform:rotate(45deg)} .p2 .post details p{margin:0;padding:0 22px 20px;color:var(--p-text)} /* CTA, sources, related, author */ .p2 .cta{margin:2.4em 0;padding:34px;border-radius:28px;background:var(--p-ink);color:#b9ccc3;text-align:center;font-family:var(--p-sans);font-size:.82em;overflow:hidden;position:relative} html[data-theme="dark"] .p2 .cta{background:#07100d;border:1px solid rgba(52,211,153,.2)} .p2 .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0,rgba(52,211,153,.25),transparent 55%);pointer-events:none} .p2 .post .cta h2{margin:0 0 10px;padding:0;border:0;color:#fff;font-size:26px} .p2 .post .cta h2::before,.p2 .post .cta h2::after{display:none} .p2 .cta p{max-width:52ch;margin:0 auto 20px} .p2 .btn,.p2-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:999px;background:var(--p-aurora);color:#03140F!important; font:700 15px var(--p-sans);text-decoration:none!important;box-shadow:0 14px 30px -12px rgba(16,185,129,.6);transition:transform .3s var(--p-ease)} .p2 .btn:hover,.p2-btn:hover{transform:translateY(-2px)} .p2-btn.-ghost{background:var(--p-paper);color:var(--p-head)!important;border:1px solid var(--p-line-2);box-shadow:none} .p2 .sources{font-family:var(--p-sans);font-size:.78em} .p2 .related{margin:2em 0 0;padding:24px;border-radius:24px;background:var(--p-paper);border-color:var(--p-line);font-family:var(--p-sans)} .p2 .post .related h2{margin:0 0 14px;padding:0;border:0;font:700 12px var(--p-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)} .p2 .post .related h2::before,.p2 .post .related h2::after{display:none} .p2 .related a{color:var(--p-head);text-decoration:none} .p2 .related span{color:var(--p-muted)} .p2 .author{display:flex;gap:18px;align-items:flex-start;margin:28px 0 0;padding:22px;border-radius:24px;background:var(--p-paper);border:1px solid var(--p-line)} .p2 .author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0} .p2 .author h3{margin:0 0 4px;font:800 17px var(--p-sans);color:var(--p-head)} .p2 .author p{margin:0 0 8px;font-size:14.5px;color:var(--p-muted)} .p2 .author a{font-weight:700;font-size:14px;text-decoration:none} /* end card */ .p2-end{margin:3em 0 0;padding:clamp(28px,5vw,48px);border-radius:32px;text-align:center;background:var(--p-paper);border:1px solid var(--p-line);position:relative;overflow:hidden} .p2-end::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(circle,rgba(52,211,153,.18),transparent 60%);pointer-events:none} .p2-end__eye{margin:0;font:600 12px var(--p-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)} .p2-end h2{margin:8px 0 0;font:800 clamp(28px,4vw,40px)/1.1 var(--p-sans);letter-spacing:-.04em;color:var(--p-head)} .p2-end__stats{margin:10px 0 0;color:var(--p-muted);font-size:15px} .p2-end__acts{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px} .p2-end__next{position:relative;display:block;margin:22px auto 0;max-width:520px;padding:18px 20px;border-radius:20px;background:var(--p-paper-2);border:1px solid var(--p-line);text-align:left;text-decoration:none!important} .p2-end__next small{display:block;font:600 11px var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-accent)} .p2-end__next b{display:block;margin-top:4px;font:700 17px/1.35 var(--p-sans);color:var(--p-head)} /* ---------------- depth modes ---------------- */ .p2-skip{display:none!important} .p2-depthnote{margin:0 0 1.4em;padding:14px 18px;border-radius:16px;background:var(--p-accent-soft);font:600 14px var(--p-sans);color:var(--p-head);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} .p2-depthnote button{border:0;border-radius:999px;padding:8px 14px;background:var(--p-ink);color:#fff;font:700 13px var(--p-sans);cursor:pointer} /* ---------------- listen mode ---------------- */ .p2-speaking{background:var(--p-mark);border-radius:10px;box-shadow:0 0 0 8px var(--p-mark);transition:background .3s} .p2-player{position:fixed;left:50%;top:92px;z-index:90;visibility:hidden;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:999px;transform:translate(-50%,-160%); background:var(--p-ink);color:#e7f3ed;font:600 13px var(--p-sans);box-shadow:0 20px 40px -18px rgba(3,20,15,.6);transition:transform .5s var(--p-ease)} .p2-player.-on{transform:translate(-50%,0);visibility:visible} .p2-player button{border:0;border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer} .p2-player button:hover{background:rgba(255,255,255,.16)} .p2-player__eq{display:flex;align-items:flex-end;gap:2px;height:14px} .p2-player__eq i{width:3px;background:var(--p-lime);border-radius:2px;animation:p2eq 1s ease-in-out infinite} .p2-player__eq i:nth-child(2){animation-delay:-.3s}.p2-player__eq i:nth-child(3){animation-delay:-.6s} .p2-player.-paused .p2-player__eq i{animation-play-state:paused} @keyframes p2eq{0%,100%{height:4px}50%{height:14px}} /* ---------------- selection popover ---------------- */ .p2-pop{position:absolute;z-index:95;display:flex;gap:2px;padding:5px;border-radius:14px;background:var(--p-ink);box-shadow:0 20px 40px -16px rgba(0,0,0,.5);transform:translate(-50%,-100%) translateY(-10px); animation:p2pop .25s var(--p-ease)} html[data-theme="dark"] .p2-pop{background:#1c2b25} @keyframes p2pop{from{opacity:0;transform:translate(-50%,-100%) translateY(0) scale(.9)}} .p2-pop button,.p2-pop a{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:0;border-radius:10px;background:none;color:#e7f3ed!important;font:600 12.5px var(--p-sans);cursor:pointer;text-decoration:none!important;white-space:nowrap} .p2-pop button:hover,.p2-pop a:hover{background:rgba(255,255,255,.1)} .p2-pop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2} /* ---------------- toast, up-next, lightbox ---------------- */ .p2-toast{position:fixed;left:50%;bottom:90px;z-index:96;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:12px 12px 12px 18px;border-radius:18px; background:var(--p-ink);color:#e7f3ed;font:600 14px var(--p-sans);box-shadow:0 24px 48px -18px rgba(0,0,0,.55);transform:translate(-50%,calc(100% + 140px));visibility:hidden;transition:transform .5s var(--p-ease),visibility 0s .5s} .p2-toast.-on{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--p-ease)} .p2-toast button{border:0;border-radius:999px;padding:8px 14px;background:var(--p-lime);color:#03140F;font:700 13px var(--p-sans);cursor:pointer} .p2-toast button.-x{background:rgba(255,255,255,.1);color:#e7f3ed;padding:8px 11px} .p2-next{position:fixed;right:20px;bottom:24px;z-index:68;width:min(340px,calc(100% - 32px));padding:16px 16px 16px 18px;border-radius:22px;background:var(--p-paper);border:1px solid var(--p-line); box-shadow:0 30px 60px -24px rgba(3,20,15,.5);transform:translateX(130%);transition:transform .6s var(--p-ease)} .p2-next.-on{transform:none} .p2-next small{display:block;font:600 11px var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-accent)} .p2-next a{display:block;margin-top:6px;font:700 16px/1.35 var(--p-sans);color:var(--p-head);text-decoration:none} .p2-next a:hover{color:var(--p-accent)} .p2-next button{position:absolute;right:10px;top:10px;width:26px;height:26px;border:0;border-radius:50%;background:var(--p-paper-2);color:var(--p-muted);cursor:pointer} @media (max-width:1179px){.p2-next{right:16px;bottom:84px}} .p2-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(3,20,15,.86);backdrop-filter:blur(6px);cursor:zoom-out;opacity:0;animation:p2fade .3s forwards} @keyframes p2fade{to{opacity:1}} .p2-lb img{max-width:min(1400px,100%);max-height:100%;border-radius:18px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)} .p2 .heroFig img,.p2 .post img{cursor:zoom-in} /* ---------------- reveal on scroll ---------------- */ .js .p2-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--p-ease),transform .8s var(--p-ease)} .js .p2-rv.-in{opacity:1;transform:none} .js .p2 .post>h2{--in:0} .js .p2 .post>h2.-in{--in:1} /* ---------------- sitewide shell (header / footer) ---------------- */ .jsHead{position:fixed;top:16px;left:0;right:0;z-index:120;padding:0 16px} .jsHead__pill{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(226,232,240,.8);box-shadow:0 10px 26px rgba(6,78,59,.06);transition:background .4s,border-color .4s} .jsBrand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .jsBrand__logo{width:36px;height:36px;border-radius:999px;overflow:hidden;background:#fff;border:1px solid rgba(226,232,240,.8);display:flex;align-items:center;justify-content:center;flex-shrink:0} .jsBrand__logo img{width:100%;height:100%;object-fit:contain;border-radius:999px;padding:2px} .jsBrand__copy{display:flex;flex-direction:column;line-height:1.15} .jsBrand__name{font-size:15px;font-weight:700;color:#0f172a;letter-spacing:-.01em;white-space:nowrap} .jsBrand__tag{display:block;font-size:11.5px;font-weight:500;color:#64748b;white-space:nowrap} .jsBrand__tag strong{color:#059669;font-weight:700} .jsNav{display:none;align-items:center;gap:2px;min-width:0;flex-wrap:nowrap} .jsNav>a{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:500;color:#475569;text-decoration:none;white-space:nowrap;transition:.2s} .jsNav>a:hover{color:#059669;background:rgba(241,245,249,.7)} .jsActions{display:none;align-items:center;gap:8px;flex-shrink:0} .jsCta{display:inline-flex;padding:9px 17px;border-radius:999px;background:#0f172a;color:#fff;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.2s} .jsCta:hover{background:#059669} .jsCta.-ghost{background:#fff;color:#334155;border:1px solid #cbd5e1} .jsBurger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:999px;background:none;color:#475569;cursor:pointer} .jsBurger svg{width:20px;height:20px} .jsMob{max-width:1024px;margin:8px auto 0;padding:14px;border-radius:20px;background:rgba(255,255,255,.97);border:1px solid #e2e8f0;box-shadow:0 18px 40px rgba(15,23,42,.12);display:none} .jsMob.-open{display:block} .jsMob a{display:block;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:500;color:#334155;text-decoration:none} .jsMob a:hover{background:#ecfdf5;color:#059669} .jsMob__sep{margin:8px 0;padding-top:8px;border-top:1px solid rgba(226,232,240,.8)} .jsMob__cta{display:block;margin-top:8px;padding:11px 14px;border-radius:12px;background:#059669;color:#fff!important;font-weight:600;text-align:center;text-decoration:none} .jsMob__cta.-ghost{background:#fff;color:#334155!important;border:1px solid #cbd5e1;margin-top:6px} @media(min-width:640px){.jsActions{display:flex}} @media(max-width:1099px){.jsNav{display:none}.jsBurger{display:inline-flex}} @media(min-width:1100px){.jsNav{display:flex}.jsBurger{display:none}.jsMob{display:none!important}} @media(min-width:1280px){.jsNav>a{padding:6px 12px;font-size:14px}} .jsFoot{margin-top:80px;border-top:1px solid var(--p-line);background:rgba(255,255,255,.7);backdrop-filter:blur(12px);padding:32px 0} .jsFoot__in{max-width:1152px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .jsFoot__brand{display:flex;align-items:center;gap:11px} .jsFoot__brand span{font-size:12.5px;font-weight:600;color:#334155} .jsFoot__logo{width:32px;height:32px;border-radius:999px;overflow:hidden;background:#fff;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center} .jsFoot__logo img{width:100%;height:100%;object-fit:contain;padding:2px} .jsFoot__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:12px;color:#64748b} .jsFoot__links a{color:#64748b;text-decoration:none} .jsFoot__links a:hover{color:#059669} html[data-theme="dark"] .jsHead__pill{background:rgba(15,26,22,.86);border-color:rgba(255,255,255,.08)} html[data-theme="dark"] .jsBrand__name{color:#f2f8f5} html[data-theme="dark"] .jsNav>a{color:#b6c8bf} html[data-theme="dark"] .jsNav>a:hover{background:rgba(255,255,255,.06);color:#6ee7b7} html[data-theme="dark"] .jsCta{background:#34d399;color:#03140F} html[data-theme="dark"] .jsCta.-ghost{background:transparent;color:#cfdcd5;border-color:rgba(255,255,255,.18)} html[data-theme="dark"] .jsBurger{color:#cfdcd5} html[data-theme="dark"] .jsMob{background:#0f1a16;border-color:rgba(255,255,255,.1)} html[data-theme="dark"] .jsMob a{color:#cfdcd5} html[data-theme="dark"] .jsFoot{background:rgba(10,18,16,.8)} html[data-theme="dark"] .jsFoot__brand span,html[data-theme="dark"] .jsFoot__links,html[data-theme="dark"] .jsFoot__links a{color:#8ea69a} html[data-theme="dark"] .toTop{background:#132019;border-color:rgba(255,255,255,.12);color:#cfdcd5} html[data-theme="dark"] .siteProg{background:rgba(255,255,255,.06)} /* ---------------- small screens ---------------- */ @media (max-width:640px){ body.p2{padding-top:88px} .p2-hero .byline{border-radius:24px;padding:12px 16px} .p2-depth{width:100%;border-radius:20px} .p2-depth__lbl{width:100%;text-align:center;padding:4px 0 2px} .p2-depth button{flex:1;align-items:center;text-align:center;padding:9px 6px} .p2 .box,.p2 .check{padding-left:18px;padding-right:18px} .p2 .heroFig img{border-radius:20px} .p2 .author{flex-direction:column} } @media (prefers-reduced-motion:reduce){ .p2 *,.p2 *::before,.p2 *::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .js .p2-rv{opacity:1;transform:none} } @media print{ .jsHead,.p2-map,.p2-tools,.p2-depth,.rail,.p2-end,.p2-next,.toTop,.siteProg{display:none!important} body.p2{padding-top:0} } /* phones read comfortably a step smaller */ @media (max-width:640px){ :root{--p-read:18px} html[data-size="s"]{--p-read:16.5px} html[data-size="l"]{--p-read:20px} } /* ================================================================== Compatibility with components written for the original template. The old colour variables are aliased to the v2 tokens, so embedded widgets (the cost calculator, blog-kit furniture, weekly items) follow the reader's theme, dark included. ================================================================== */ .p2{--bg:transparent;--surface:var(--p-paper);--border:var(--p-line);--border-2:var(--p-line-2);--primary:var(--p-accent);--primary-hover:var(--p-accent); --primary-light:var(--p-accent-2);--primary-soft:var(--p-accent-soft);--text:var(--p-text);--muted:var(--p-muted);--heading:var(--p-head); --danger:var(--p-rose);--danger-soft:var(--p-rose-soft);--amber:var(--p-amber);--amber-soft:rgba(245,158,11,.1)} .p2 .post blockquote{margin:0 0 1.4em;padding:18px 22px;border-left:3px solid var(--p-accent-2);border-radius:0 18px 18px 0;background:var(--p-paper);font-style:italic;color:var(--p-head)} .p2 .post blockquote p:last-child{margin-bottom:0} .p2 .post blockquote cite{display:block;margin-top:8px;font:normal 600 13px var(--p-sans);color:var(--p-muted)} .p2 .post figure{margin:0 0 1.4em} .p2 .post figcaption{font:italic 400 14.5px/1.5 var(--p-serif);color:var(--p-muted)} .p2 .articleFig img,.p2 .shot,.p2 .ba figure{border-color:var(--p-line)} .p2 .post table.facts{margin:0 0 1.4em;border:1px solid var(--p-line);border-radius:18px;overflow:hidden;background:var(--p-paper)} .p2 .ctaMid{margin:2em 0;border-radius:24px;font-family:var(--p-sans);font-size:.84em} .p2 .ctaEnd{border-radius:28px;font-family:var(--p-sans);font-size:.84em} .p2 .post .ctaMid h2,.p2 .post .ctaEnd h2{margin-top:0;padding-top:0;border:0} .p2 .post .ctaMid h2::before,.p2 .post .ctaMid h2::after,.p2 .post .ctaEnd h2::before,.p2 .post .ctaEnd h2::after{display:none} .p2 .post .ctaEnd h2{color:#fff;margin:16px 0 12px} .p2 .xEmbed blockquote{font-style:normal} .p2 .draft{margin:0 0 1.6em;padding:18px 20px;border-radius:20px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);font-family:var(--p-sans);font-size:.8em;color:var(--p-text)} .p2 .draft b{display:block;margin-bottom:6px;color:var(--p-amber)} .p2 .draft p{margin:0 0 .6em} .p2 .toc{display:none} .p2 .calc{font-family:var(--p-sans);font-size:.82em;border-radius:24px} html[data-theme="dark"] .p2 .calc input[type=number],html[data-theme="dark"] .p2 .calc__presets button{background:var(--p-paper-2);color:var(--p-head);border-color:var(--p-line-2)} html[data-theme="dark"] .p2 .ctaEnd{background:#07100d;border:1px solid rgba(52,211,153,.2)} html[data-theme="dark"] .p2 .ctaMid,html[data-theme="dark"] .p2 .xEmbed blockquote,html[data-theme="dark"] .p2 .shot,html[data-theme="dark"] .p2 .ba figure{background:var(--p-paper);border-color:var(--p-line)} html[data-theme="dark"] .p2 .shot figcaption{background:var(--p-paper);border-color:var(--p-line)} html[data-theme="dark"] .p2 .ba__tag{background:#1c2b25} /* author photos are always round crops, never stretched */ .p2 .ctaEnd__body img,.p2 .author img{flex:none;object-fit:cover;object-position:50% 30%} .p2 .ctaEnd strong,.p2 .ctaEnd b{color:#fff}