/* Shared styles for individual blog post pages. Reuses the Pinnaly design tokens already set in public/blog.html so a post looks like the rest of the site. Add new posts by linking this file, never by copy-pasting the rules below into the post again. */ /* Self-hosted fonts (latin subset, SIL Open Font License). A post that links only this file needs no Google Fonts request in its head. Inter is one variable file that covers weights 400 to 800. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400-latin.woff2) format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700-latin.woff2) format('woff2')} :root{ --teal:#12182B; --teal-2:#5849B3; --lime:#C1D97A; --lime-deep:#AFC862; --purple:#5849B3; --blue:#4C8ACC; --beige:#E4EED7; --white:#fff; --ink:#12182B; --muted:rgba(18,24,43,.7); --line:rgba(18,24,43,.12); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent} body{font-family:'Inter',sans-serif;background:var(--beige);color:var(--ink);-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} .wrap{max-width:840px;margin:0 auto;padding:0 24px} .mono{font-family:'Space Mono',monospace} .badge{display:inline-block;border:1px solid var(--teal);border-radius:999px;padding:6px 16px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)} /* header, identical to blog.html */ header{position:sticky;top:0;z-index:100} .hdr-inner{max-width:1440px;margin:0 auto;padding:16px 24px} nav{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px; padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--teal)} .logo b{color:var(--purple);font-weight:800} .btn-teal{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--white);padding:11px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,#6C5DD3 0%,var(--purple) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(18,24,43,.14),0 8px 20px -8px rgba(88,73,179,.75);cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s,filter .2s} .btn-teal:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(18,24,43,.14),0 12px 26px -8px rgba(88,73,179,.85)} .btn-teal:active{transform:translateY(0);filter:brightness(.97)} /* article header, in the text column: back link, category, H1, byline row, cover */ .post-back{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--muted)} .post-back:hover,.post-back:focus-visible{color:var(--teal-2)} .post-cat{margin-top:16px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple)} .post-head h1{font-size:clamp(1.9rem,4vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-top:10px;color:var(--ink)} .post-head h1 .accent{color:var(--purple)} .post-cover{margin:24px 0 32px} .post-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;box-shadow:0 26px 50px -30px rgba(18,24,43,.45);display:block} /* two column layout: article + sticky rail on the right */ .post-layout{max-width:760px;margin:0 auto;padding:28px 24px 88px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px} /* article body */ .article p{font-size:1.05rem;line-height:1.8;color:var(--ink);margin:0 0 20px} .article h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:44px 0 16px;scroll-margin-top:96px} .article h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:28px 0 12px;scroll-margin-top:96px} .article ul,.article ol{margin:0 0 20px;padding-left:22px;line-height:1.8} .article li{margin-bottom:8px} .article figure{margin:28px 0} .article figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;box-shadow:0 20px 40px -28px rgba(18,24,43,.35);display:block} .article figcaption{margin-top:10px;font-size:.82rem;color:var(--muted)} .article figcaption a{text-decoration:underline} .article blockquote{border-left:3px solid var(--lime-deep);background:var(--white);padding:18px 22px;margin:28px 0;border-radius:0 12px 12px 0;font-size:1.02rem;line-height:1.7;color:var(--ink)} .article table{width:100%;border-collapse:collapse;margin:28px 0;font-size:.92rem} .article table caption{caption-side:top;text-align:left;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .article th{background:var(--teal);color:var(--white);text-align:left;padding:12px 14px;font-weight:600} .article td{padding:12px 14px;border-bottom:1px solid var(--line)} .article .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .article a.inline-link{text-decoration:underline;text-underline-offset:2px} /* product section callout */ .product-box{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin:36px 0;box-shadow:0 26px 50px -34px rgba(18,24,43,.3)} .product-box h2{margin-top:0} /* FAQ */ .faq-item{border-top:1px solid var(--line);padding:18px 0} .faq-item:last-child{border-bottom:1px solid var(--line)} .faq-item h3{margin:0 0 8px} .faq-item p{margin:0;color:var(--ink)} /* closing CTA */ .closing-cta{background:var(--teal);color:var(--white);border-radius:20px;padding:36px 30px;margin-top:44px;text-align:left;position:relative;overflow:hidden} .closing-cta p{color:rgba(255,255,255,.85);max-width:520px;margin:0 0 20px;line-height:1.7} /* The picture never takes space, so the box keeps its size and the text never re-wraps. Under 1240px it covers the whole box and a mask fades it into the box colour: solid behind the text, clear along the bottom (beside the button) and, on tablets, right of the 520px text column. The mask stays at most .3 where text sits, so white text keeps AA contrast. */ .closing-cta-pic{display:block;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - 170px),rgba(0,0,0,.3) calc(100% - 100px),#000 100%),linear-gradient(to right,transparent 560px,#000 100%);mask-image:linear-gradient(to bottom,transparent calc(100% - 170px),rgba(0,0,0,.3) calc(100% - 100px),#000 100%),linear-gradient(to right,transparent 560px,#000 100%)} .closing-cta-body{position:relative;z-index:1;text-shadow:0 1px 2px rgba(18,24,43,.45)} .closing-cta-img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover} a.closing-cta{display:block;transition:transform .15s,box-shadow .2s} a.closing-cta:hover,a.closing-cta:focus-visible{transform:translateY(-2px);box-shadow:0 30px 56px -28px rgba(18,24,43,.7)} a.closing-cta:focus-visible{outline:3px solid var(--lime);outline-offset:3px} a.closing-cta:hover .btn-teal,a.closing-cta:focus-visible .btn-teal{filter:brightness(1.08)} /* From 1240px the article is at least 852px. The left-aligned 520px text ends 550px from the box edge, so a 130px strip fits on the right. */ @media (min-width:1240px){.closing-cta-pic{display:block;position:absolute;top:0;bottom:0;right:0;left:auto;width:130px;overflow:hidden;-webkit-mask-image:none;mask-image:none}} /* rail */ .rail-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:0 22px 44px -30px rgba(18,24,43,.28)} .rail-card + .rail-card{margin-top:20px} .rail-kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block} /* TOC: a plain list on one hairline, no box; the section being read is bold with a 2px brand bar on the line (the Selzee look, owner 1 Oct 2026) */ .rail-card.rail-toc{background:none;border:0;border-radius:0;box-shadow:none;padding:0} .toc-list{list-style:none;display:grid;gap:0;border-left:1px solid var(--line)} .toc-list a{font-size:.92rem;line-height:1.5;color:var(--muted);display:block} .toc-list a{margin-left:-1px;border-left:2px solid transparent;padding:4px 0 4px 12px;transition:color .15s,border-color .15s} .toc-list a:hover{color:var(--teal-2);text-decoration:underline} .toc-list a.is-active{font-weight:700;color:var(--teal);border-left-color:var(--purple)} .rail-cta p{font-size:.92rem;line-height:1.6;color:var(--muted);margin-bottom:16px} .rail-cta .btn-teal{width:100%;justify-content:center} footer{background:var(--teal);color:var(--white);padding:40px 0} footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;max-width:1280px} footer .cp{font-size:.85rem;color:rgba(255,255,255,.6)} footer a.blink{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)} /* author byline row: photo, name, date, read time */ .byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:16px;font-size:.9rem;color:var(--muted)} .byline img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block} .byline-name{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px} .byline-sep{color:rgba(18,24,43,.35)} /* Listen to article (blog/components/listen-player.html): a pill at the right end of the byline row. It never changes size on a click: the label reserves its widest word, the time and the speed have fixed widths, no hover scale. Narrower than 1240px it takes its own full-width line under the byline; from 1240px the text column is at least 852px, the row never wraps and the player is a fixed 22.5rem. */ .listen{position:relative;display:flex;align-items:center;gap:8px;flex:1 0 100%;width:100%;min-width:0;margin-top:4px;padding:4px 12px 4px 4px;background:var(--white);border:1px solid var(--line);border-radius:999px;font-family:'Inter',sans-serif;font-size:13px;line-height:1.2;color:var(--ink);white-space:nowrap} .listen[hidden],.listen [hidden]{display:none!important} .listen button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer} .listen button:focus-visible{outline:2px solid var(--purple);outline-offset:2px} .listen .listen-toggle{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--purple);color:var(--white);transition:background-color .15s} .listen .listen-toggle:hover{background:var(--teal)} .listen-toggle svg{width:16px;height:16px;display:block} .listen-toggle [data-listen-icon-play]{margin-left:2px} .listen .listen-label{display:inline-grid;flex-shrink:0;font-weight:600;text-align:left} .listen-label > span{grid-area:1/1} .listen-reserve{visibility:hidden} .listen-seek{flex:1 1 auto;min-width:0;width:auto;height:4px;margin:0;cursor:pointer;accent-color:var(--purple)} .listen-time{flex-shrink:0;text-align:right;font-family:'Space Mono',monospace;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)} .listen .listen-rate{width:6ch;flex-shrink:0;padding:2px 0;border-radius:999px;text-align:center;font-family:'Space Mono',monospace;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);transition:background-color .15s,color .15s} .listen .listen-rate:hover{background:rgba(18,24,43,.06);color:var(--ink)} .listen .listen-info{display:flex;align-items:center;flex-shrink:0;border-radius:50%;color:var(--muted);transition:color .15s} .listen .listen-info:hover{color:var(--ink)} .listen-info svg{width:16px;height:16px;display:block} .listen-tip{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:16rem;max-width:calc(100vw - 32px);white-space:normal;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12px;line-height:1.45;color:var(--muted);box-shadow:0 10px 24px -12px rgba(18,24,43,.35)} @media (min-width:1240px){ .byline{flex-wrap:nowrap;white-space:nowrap} .listen{flex:0 0 22.5rem;width:22.5rem;margin-left:auto;margin-top:0} } /* The paragraph being read: a soft brand tint with a little bleed, so the text itself never shifts. */ [data-listen-current]{background-color:rgba(88,73,179,.08);box-shadow:0 0 0 6px rgba(88,73,179,.08);border-radius:4px;transition:background-color .2s,box-shadow .2s} /* preferred source box, near the end of every article */ .pref-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;background:var(--white);border:1px solid #D9DCE3;border-left:6px solid #000;border-radius:4px;padding:20px 22px;margin:36px 0} .article .pref-source p{margin:0} .article .pref-line{font-size:1.05rem;font-weight:600;line-height:1.4} .article .pref-line strong{font-weight:800} .article .pref-sub{font-size:.92rem;line-height:1.5;color:var(--muted);margin-top:4px} .pref-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #C9CDD6;border-radius:999px;padding:10px 18px;font-weight:700;font-size:.92rem;color:#1F1F1F;white-space:nowrap;transition:box-shadow .2s,border-color .2s} .pref-btn:hover{border-color:#9AA0AC;box-shadow:0 4px 14px -6px rgba(18,24,43,.35)} .pref-g{width:20px;height:20px;flex:none} @media (max-width:600px){.pref-source{flex-direction:column;align-items:flex-start}} /* share row, at the end of every article */ .share-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px} .share-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .share-btns{display:flex;flex-wrap:wrap;gap:10px} .share-btn{width:40px;height:40px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:transform .15s,filter .2s} .share-btn:hover,.share-btn:focus-visible{transform:translateY(-1px);filter:brightness(1.1)} .share-btn svg{width:20px;height:20px;display:block} .s-copy{background:var(--teal)} .s-facebook{background:#1877F2} .s-x{background:#000} .s-linkedin{background:#0A66C2} .s-pinterest{background:#E60023} .s-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF 75%,#515BD4)} .s-whatsapp{background:#25D366} .s-gmail{background:#EA4335} .share-status{font-size:.88rem;color:var(--teal-2);font-weight:600;min-height:1em} /* Ask AI about Pinnaly strip, last row of the footer. Same block on every page. */ .ask-ai{max-width:1280px;margin:32px auto 0;padding:22px 24px 0;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px} .ask-ai-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0} .ask-ai ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin:0;padding:0} .ask-ai a{display:block;color:rgba(255,255,255,.6);transition:color .2s} .ask-ai a:hover,.ask-ai a:focus-visible{color:#C1D97A} .ask-ai svg{width:22px;height:22px;display:block} /* rail CTA card: dark, photo on top, trust row, white button */ .rail-card.rail-cta{max-width:100%;background:var(--teal);color:var(--white);border:0;border-radius:20px;padding:0;overflow:hidden;box-shadow:0 26px 50px -30px rgba(18,24,43,.55)} .rail{min-width:0} .rail-cta .rail-cta-pic{display:block;width:100%;height:140px;overflow:hidden;border-radius:20px 20px 0 0} .rail-cta .rail-cta-img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover} .rail-cta-body{padding:22px 22px 24px} .rail-cta .rail-cta-title{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--white);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-cta .rail-cta-sub{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.65);margin:6px 0 0} .rail-cta-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;background:var(--white);color:var(--teal);font-weight:700;font-size:.95rem;border-radius:999px;padding:13px 20px;transition:transform .15s,filter .2s} a.rail-cta{display:block;transition:transform .15s,box-shadow .2s} a.rail-cta:hover,a.rail-cta:focus-visible{transform:translateY(-2px);box-shadow:0 30px 56px -28px rgba(18,24,43,.7)} a.rail-cta:focus-visible{outline:3px solid var(--lime);outline-offset:3px} a.rail-cta:hover .rail-cta-btn,a.rail-cta:focus-visible .rail-cta-btn{filter:brightness(.93)} /* Desktop: article + rail. The