/* pirch — "the short list" blog. Loads AFTER roles.css (tokens, nav, footer, btn, cta-band, fit columns, chips all come from there); this file adds the article components and the scroll-reveal system. Every text pairing meets WCAG AA per DESIGN-SYSTEM.md — --accent is decorative/large-display only, small accent text always uses the -ink roles. */ .blog{--accent:var(--rust)} .post{max-width:760px} /* ---- scroll reveal (JS adds .js to ; without JS nothing is hidden) */ .js .rv{opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .js .rv.rv-on{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .js .rv{opacity:1;transform:none;transition:none} } /* ---- post hero */ .post-hero{padding:30px 0 14px;border-bottom:1px solid var(--line);margin-bottom:8px} .post-hero h1{font-size:clamp(34px,6vw,46px);line-height:1.08;letter-spacing:-.025em; font-weight:800;margin-top:14px;max-width:22ch} .post-hero .dek{font-size:20px;line-height:1.5;color:var(--muted);margin-top:16px;max-width:56ch} .post-hero .meta{margin-top:18px;font-size:13.5px;color:var(--muted)} .index-hero{border-bottom:0;padding-bottom:4px} /* ---- prose */ .prose{padding:14px 0} .prose p{font-size:17.5px;line-height:1.75;margin-top:18px;max-width:66ch} .prose h2{margin-top:34px;font-size:27px} .prose h3{margin-top:26px;font-size:19px} .prose a{color:var(--rust-ink);font-weight:600;text-decoration:underline; text-decoration-color:var(--line);text-underline-offset:3px} .prose a:hover{text-decoration-color:var(--rust-ink)} .prose b{font-weight:700} /* ---- big-number stat row */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0} .stat{background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:22px 22px 20px;box-shadow:0 1px 0 rgba(0,0,0,.02)} .stat .n{font-size:clamp(30px,4.6vw,40px);font-weight:800;letter-spacing:-.02em; color:var(--accent);line-height:1.05} .stat .l{font-size:14.5px;line-height:1.45;margin-top:10px;color:var(--ink);font-weight:600} .stat .s{font-size:12.5px;color:var(--muted);margin-top:6px} /* ---- bar chart (pure CSS, fills animate on reveal) */ .chart{background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:26px 26px 20px;margin:30px 0} .chart h3{font-size:16px;letter-spacing:.01em;margin-bottom:8px} .bar{margin-top:16px} .bar .bl{display:flex;justify-content:space-between;align-items:baseline;gap:14px; font-size:14.5px;color:var(--ink)} .bar .bl b{font-weight:800;white-space:nowrap;font-size:15px} .bar .tr{height:12px;border-radius:999px;background:var(--panel);margin-top:7px;overflow:hidden} .bar .tr i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#fff)); transition:width 1.1s cubic-bezier(.2,.7,.2,1) .15s} .rv-on .bar .tr i{width:var(--w)} html:not(.js) .bar .tr i{width:var(--w)} @media (prefers-reduced-motion: reduce){.bar .tr i{width:var(--w);transition:none}} .chart .cap,.compare .cap{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5} /* ---- pull quote */ .pull{margin:38px 0;padding:6px 0 6px 26px;border-left:4px solid var(--accent)} .pull p{font-size:23px;line-height:1.45;font-weight:700;letter-spacing:-.015em;max-width:30ch} .pull cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--muted)} /* ---- comparison table (stacks to cards on mobile) */ .compare{margin:30px 0} .compare h3{font-size:16px;margin-bottom:12px} .twrap{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden} .compare table{width:100%;border-collapse:collapse;font-size:15px} .compare thead th{text-align:left;font-size:12px;text-transform:uppercase; letter-spacing:.08em;color:var(--muted);padding:14px 18px;background:var(--panel)} .compare tbody th{text-align:left;font-weight:800;padding:16px 18px;vertical-align:top; white-space:nowrap} .compare tbody td{padding:16px 18px;vertical-align:top;color:var(--ink);line-height:1.55} .compare tbody tr{border-top:1px solid var(--line)} /* ---- image block: graceful load (panel shows through, img fades in) */ .img-block{margin:38px auto;text-align:center} .img-block img{max-width:min(340px,70%);height:auto;opacity:0;transform:scale(.985); transition:opacity .8s ease,transform .8s ease} .img-block img.ok{opacity:1;transform:none} html:not(.js) .img-block img{opacity:1;transform:none} .img-block.small img{max-width:min(220px,55%)} .img-block figcaption{font-size:13.5px;color:var(--muted);margin-top:14px; max-width:44ch;margin-left:auto;margin-right:auto;line-height:1.5} /* ---- verdict card */ .verdict{background:var(--panel);border:1px solid var(--line);border-radius:22px; padding:32px 30px;margin:38px 0;position:relative;overflow:hidden} .verdict::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)} .verdict .vlabel{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--rust-ink)} .verdict h2{margin-top:10px;font-size:26px} .verdict p{margin-top:14px;font-size:16.5px;line-height:1.65;max-width:62ch} .verdict a{color:var(--rust-ink);font-weight:700} /* ---- callout aside */ .callout{background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:16px 20px;margin:28px 0;font-size:14.5px;line-height:1.6;color:var(--muted)} .callout b{color:var(--rust-ink);font-weight:700;text-transform:uppercase; font-size:11.5px;letter-spacing:.1em;margin-right:6px} .callout a{color:var(--rust-ink);font-weight:600} /* ---- sources */ .sources ol{margin:14px 0 0 20px} .sources li{font-size:14px;color:var(--muted);padding:5px 0;line-height:1.5} .sources a{color:var(--rust-ink)} .sources a:hover{text-decoration:underline} /* ---- blog index: featured card + grid */ .featured{display:grid;grid-template-columns:220px 1fr;gap:0;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:22px; overflow:hidden;margin-top:26px;transition:.18s;box-shadow:0 1px 0 rgba(0,0,0,.02)} .featured:hover{border-color:var(--rust);transform:translateY(-2px); box-shadow:0 18px 50px rgba(42,37,33,.10)} .featured .fart{align-self:stretch;background:var(--panel);display:flex; align-items:center;justify-content:center;padding:28px} .featured .fart img{width:150px;height:auto} .featured .fbody{padding:28px 30px} .featured h2{font-size:25px;line-height:1.2;margin-top:10px} .featured p{color:var(--muted);font-size:15.5px;margin-top:10px;line-height:1.6} .featured .meta{margin-top:14px;font-size:13px;color:var(--muted)} .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:24px;transition:.18s} .pcard:hover{border-color:var(--rust);transform:translateY(-2px)} .pcard .t{font-size:18.5px;font-weight:800;line-height:1.25;margin-top:8px;letter-spacing:-.01em} .pcard .d{color:var(--muted);font-size:14.5px;margin-top:8px;line-height:1.55} .pcard .meta{margin-top:12px;font-size:12.5px;color:var(--muted)} @media(max-width:760px){ .post-hero .dek{font-size:17.5px} .stats{grid-template-columns:1fr} .pull p{font-size:19.5px} .featured{grid-template-columns:1fr} .featured .fart{padding:22px} .featured .fart img{width:110px} .pgrid{grid-template-columns:1fr} .compare thead{display:none} .compare tbody tr{display:block;padding:6px 0} .compare tbody th,.compare tbody td{display:block;padding:8px 18px;white-space:normal} .compare tbody th{padding-top:14px} .compare tbody td{padding-top:0;color:var(--muted)} .compare tbody td::before{content:attr(data-h);display:block;font-size:11px; text-transform:uppercase;letter-spacing:.08em;color:var(--rust-ink); font-weight:700;margin:8px 0 2px} }