/* ========================================================================== 52Launch - blog post stylesheet (blog.css) Loads AFTER /shared.css and only on /resources/ pages. It adds classes prefixed "p" (phero, pbody, prose, paside, pcard ...) and never restyles anything defined in shared.css, so existing pages are unaffected. Golden-ratio system (phi = 1.618) --------------------------------- Type scale, base 17px (the site's body-copy size on inner pages): kicker 10.5px = 17 / phi meta 13.5px = 17 / sqrt(phi) body 17px lead/h3 21.5px = 17 * sqrt(phi) h2 27.5px = 17 * phi h1 44.5px = 17 * phi^2 Line height for reading copy = phi (1.618 -> 27.5px on 17px type). Spacing scale (Fibonacci, each step ~phi apart): 8 13 21 34 55 89 144. Layout: hero and body split 1.618fr : 1fr (61.8% / 38.2%); prose column 40em (680px) vs sidebar ~420px (ratio 1.62); card thumbnails and stacked hero image are 1.618:1 golden rectangles. ========================================================================== */ :root{ --g-phi:1.618; --g-1:8px;--g-2:13px;--g-3:21px;--g-4:34px;--g-5:55px;--g-6:89px;--g-7:144px; --g-t0:10.5px;--g-t1:13.5px;--g-t2:17px;--g-t3:21.5px;--g-t4:27.5px;--g-t5:44.5px; --g-head:114px; /* sticky header: 84px logo + 2*14px padding + 2px rule */ } html{scroll-padding-top:calc(var(--g-head) + var(--g-3))} /* shared.css sets body{overflow-x:hidden} while html is overflow-x:clip; that turns into a scroll container and silently disables every position:sticky element (the header, sidebars). "clip" prevents horizontal scroll without creating a scroll container. Scoped to blog pages because blog.css only loads here. Same 1-line fix would repair the sticky header on every other page if applied in shared.css. */ body{overflow-x:clip} /* reading progress (sits above the sticky header, below the full-screen menu) */ .pprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none} .pprog span{display:block;height:100%;width:0;background:var(--red);transition:width 80ms linear} /* --------------------------------------------------------------- hero */ .phero{border-bottom:2px solid var(--black)} .phero-in{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr)} .phero-l{padding:var(--g-5) 60px;border-right:2px solid var(--black);display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .pcrumb{display:flex;align-items:center;gap:var(--g-1);font-size:var(--g-t1);color:var(--ink-60);margin-bottom:var(--g-3)} .pcrumb a{color:var(--ink-60);font-weight:500} .pcrumb a:hover{color:var(--red);text-decoration:none} .pcrumb span{color:var(--hairline)} .ptitle{font-size:clamp(30px,3.4vw,var(--g-t5));line-height:1.1;font-weight:500;max-width:22ch;text-wrap:balance;margin-top:var(--g-3)} .plead{color:var(--ink-60);font-size:clamp(18px,1.6vw,var(--g-t3));line-height:1.5;max-width:52ch;margin-top:var(--g-3)} .pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g-2) var(--g-3);margin-top:var(--g-4);font-size:var(--g-t1);color:var(--ink-60)} .pmeta b{font-weight:500;color:var(--black)} .pmeta-au{display:inline-flex;align-items:center;gap:var(--g-1)} .pmeta > :not(:first-child)::before{content:"";display:inline-block;width:4px;height:4px;background:var(--red);margin-right:var(--g-3);vertical-align:middle} .pavatar{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--black);color:var(--white);font-style:normal;font-weight:600;font-size:12px;letter-spacing:.04em;flex-shrink:0} .pavatar.lg{width:55px;height:55px;font-size:16px} .phero-r{position:relative;overflow:hidden;background:var(--cloud);min-height:377px} .phero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)} .phero-r:hover img{transform:scale(1.04)} /* "contain" mode for thumbnail-style heroes (podcast covers with text): the full image shows, uncropped, over a blurred copy of itself; the caption chip stays in place */ .phero-r.contain::before{content:"";position:absolute;inset:-40px;background:var(--hero-bg) center/cover no-repeat;filter:blur(28px) saturate(.85);opacity:.45} .phero-r.contain img{object-fit:contain;padding:var(--g-4);box-sizing:border-box;filter:drop-shadow(0 8px 21px rgba(0,0,0,.18))} .phero-r.contain:hover img{transform:scale(1.02)} .phero-cap{position:absolute;left:0;bottom:0;background:var(--white);border-top:2px solid var(--black);border-right:2px solid var(--black);padding:13px 19px} .phero-cap b{display:block;font-weight:600;font-size:var(--g-t0);letter-spacing:.07em;color:var(--red);margin-bottom:3px} .phero-cap span{font-size:14px;font-weight:500} /* --------------------------------------------------------------- body */ .pbody{border-bottom:2px solid var(--black)} .pbody-in{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr)} .particle{padding:var(--g-5) 60px var(--g-6);min-width:0} .prose{max-width:40em;font-size:var(--g-t2);line-height:var(--g-phi);font-weight:300} .prose > :first-child{margin-top:0} .prose p{margin:0 0 var(--g-3)} .prose h2{font-size:clamp(23px,2.2vw,var(--g-t4));line-height:1.2;font-weight:500;margin:var(--g-5) 0 var(--g-3);padding-top:var(--g-3);border-top:2px solid var(--black)} .prose h3{font-size:var(--g-t3);line-height:1.25;font-weight:500;margin:var(--g-4) 0 var(--g-2)} .prose h4{font-size:var(--g-t2);font-weight:600;margin:var(--g-3) 0 var(--g-1)} .prose h5,.prose h6{font-size:var(--g-t2);font-weight:500;margin:var(--g-3) 0 var(--g-1)} .prose ul,.prose ol{margin:0 0 var(--g-3);padding-left:var(--g-3)} .prose li{margin-bottom:var(--g-1);padding-left:5px} .prose li::marker{color:var(--red);font-weight:600} .prose li > ul,.prose li > ol{margin:var(--g-1) 0 0} .prose a{font-weight:500;border-bottom:2px solid var(--red);padding-bottom:1px;transition:color 180ms var(--ease)} .prose a:hover{color:var(--red);text-decoration:none} .prose strong{font-weight:600} .prose em{font-style:italic} .prose blockquote{margin:var(--g-4) 0;padding:var(--g-2) 0 var(--g-2) var(--g-4);border-left:4px solid var(--red);font-size:var(--g-t3);line-height:1.4;font-weight:500} .prose blockquote p{margin:0} .prose blockquote cite{display:block;font-size:var(--g-t1);color:var(--ink-60);font-style:normal;font-weight:300;margin-top:var(--g-1)} .prose figure{margin:var(--g-4) 0} .prose figure img,.prose > img,.prose p > img{max-width:100%;width:100%;height:auto;display:block;border:2px solid var(--black)} .prose figcaption{font-size:var(--g-t1);color:var(--ink-60);margin-top:var(--g-1);line-height:1.6} .prose .pvideo{position:relative;aspect-ratio:16/9;border:2px solid var(--black);background:#000;margin:var(--g-4) 0;overflow:hidden} .prose .pvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .prose .pnote{background:var(--cloud);border:1px solid var(--hairline);padding:var(--g-3);margin:var(--g-4) 0} .prose .pnote > :last-child{margin-bottom:0} .prose .pnote b.k,.pbox b.k{display:block;font-weight:600;font-size:var(--g-t0);letter-spacing:.07em;color:var(--red);margin-bottom:var(--g-2)} .prose hr{border:0;border-top:1px solid var(--hairline);margin:var(--g-4) 0} .prose table{width:100%;border-collapse:collapse;font-size:15px;margin:var(--g-4) 0} .prose th,.prose td{text-align:left;padding:var(--g-2) var(--g-2);border-bottom:1px solid var(--hairline);vertical-align:top} .prose th{font-weight:600;border-bottom:2px solid var(--black)} .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--cloud);padding:2px 6px} .pend{max-width:40em;margin-top:var(--g-5);padding-top:var(--g-4);border-top:2px solid var(--black);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--g-3)} .ptags{display:flex;gap:var(--g-1);flex-wrap:wrap} .ptag{border:1px solid var(--hairline);padding:8px 16px;font-size:13px;font-weight:500;transition:border-color 200ms var(--ease),background 200ms var(--ease)} .ptag:hover{border-color:var(--black);background:var(--cloud);text-decoration:none} /* sidebar */ .paside{border-left:2px solid var(--black);padding:var(--g-5) 60px var(--g-5) var(--g-4);min-width:0} .paside-in{position:sticky;top:calc(var(--g-head) + var(--g-3))} .pbox{padding:var(--g-3) 0;border-top:1px solid var(--hairline)} .pbox:first-child{padding-top:0;border-top:0} .ptoc ol{list-style:none;margin:0;padding:0} .ptoc li{margin:0} .ptoc a{display:block;border-left:2px solid var(--hairline);padding:6px 0 6px var(--g-2);font-size:var(--g-t1);font-weight:500;color:var(--ink-60);line-height:1.5;transition:color 170ms var(--ease),border-color 170ms var(--ease),padding-left 170ms var(--ease)} .ptoc a:hover{color:var(--black);border-left-color:var(--black);text-decoration:none} .ptoc a.on{color:var(--black);border-left-color:var(--red)} .ptoc li.sub a{padding-left:var(--g-3);font-weight:300} .pauthor-row{display:flex;align-items:center;gap:var(--g-2);margin-bottom:var(--g-2)} .pauthor-row strong{display:block;font-weight:500;font-size:16px;line-height:1.3} .pauthor-row span{display:block;font-size:var(--g-t1);color:var(--ink-60)} .pauthor p{font-size:14.5px;color:var(--ink-60);line-height:1.7;margin-bottom:var(--g-2)} .pshare-row{display:flex;gap:var(--g-1);flex-wrap:wrap} .pshare-row a,.pshare-row button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--hairline);background:var(--white);color:var(--black);cursor:pointer;transition:background 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease)} .pshare-row a:hover,.pshare-row button:hover{background:var(--red);color:var(--white);border-color:var(--red);text-decoration:none} .pshare-row svg{width:17px;height:17px;fill:currentColor;display:block} .pshare-row .stroke svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pshare-note{font-size:12.5px;color:var(--ink-60);margin-top:var(--g-1);min-height:1.2em} .phelp{border:2px solid var(--black);box-shadow:6px 6px 0 var(--red);padding:var(--g-3);margin-top:var(--g-3);background:var(--white)} .phelp h3{font-size:var(--g-t3);line-height:1.2;font-weight:500} .phelp p{font-size:14.5px;color:var(--ink-60);line-height:1.7;margin:var(--g-1) 0 var(--g-3)} /* --------------------------------------------------------- keep reading */ .pmore{padding:var(--g-5) 60px var(--g-6)} .pmore h2{font-size:clamp(26px,3vw,38px);line-height:1.1;max-width:28ch;margin-top:16px} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-3);margin-top:var(--g-4)} .pcard{display:flex;flex-direction:column;border:1px solid var(--hairline);background:var(--white);transition:transform 250ms var(--ease),border-color 250ms var(--ease)} .pcard:hover{transform:translateY(-5px);border-color:var(--black);text-decoration:none} .pcard-im{position:relative;aspect-ratio:1.618/1;overflow:hidden;background:var(--cloud)} .pcard-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)} .pcard:hover .pcard-im img{transform:scale(1.06)} .pcard-b{padding:var(--g-3) 22px 24px;display:flex;flex-direction:column;gap:var(--g-1);flex:1} .pcard .cat{font-weight:600;font-size:10px;letter-spacing:.07em;color:var(--red)} .pcard h3{font-size:17px;line-height:1.35;font-weight:500} .pcard time{font-size:var(--g-t1);color:var(--ink-60);margin-top:auto} .pcard .rd{font-weight:500;font-size:13px;border-bottom:2px solid var(--red);align-self:flex-start;padding-bottom:1px} .pmore-all{margin-top:var(--g-4)} /* the sidebar already carries the consultation CTA, so the floating pill only shows once the sidebar stops being sticky (tablet and phone) */ @media (min-width:1081px){#fcta{display:none}} /* ---------------------------------------------------------- responsive */ @media (max-width:1080px){ .phero-in,.pbody-in{grid-template-columns:1fr} .phero-l{border-right:0;border-bottom:2px solid var(--black);padding:44px 40px} .phero-r{min-height:0;aspect-ratio:1.618/1} .phero-r.contain img{padding:var(--g-3) var(--g-3) 64px} .particle{padding:44px 40px 55px} .paside{border-left:0;border-top:2px solid var(--black);padding:44px 40px} .paside-in{position:static} .ptoc{display:none} .pgrid{grid-template-columns:repeat(2,1fr)} .pmore{padding:44px 40px 55px} } @media (max-width:768px){ .phero-l,.particle,.paside,.pmore{padding-left:24px;padding-right:24px} .ptitle{font-size:clamp(28px,7.4vw,36px)} .plead{font-size:18px} .pmeta{gap:var(--g-1) var(--g-2)} .pmeta > :not(:first-child)::before{margin-right:var(--g-2)} .prose{font-size:16px} .prose h2{font-size:23px} .prose blockquote{padding-left:var(--g-3);font-size:19px} .pgrid{grid-template-columns:1fr} .pend{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .phero-r img,.pcard-im img,.pcard{transition:none} } @media print{ .pprog,.paside,.pmore,.cbar,#fcta,.hdr-menu{display:none} .pbody-in,.phero-in{grid-template-columns:1fr} }