/* ============================================================================ report.css โ€” shared design system for the Comprendo Insights section. Two layers live here: 1. The report "chrome" + component styles, extracted verbatim from the original standalone reading-level report. Full custom reports use these classes directly (see src/insights/*.njk). 2. An `.insight-body` base scope (near the bottom) that styles *bare* HTML elements, so a light Markdown post looks right with no class wrangling. This is what makes the insight-article layout work. Served through the site's PostCSS pipeline. It contains no @tailwind directives, so Tailwind injects nothing โ€” it passes through (autoprefixer only). Only loaded on the Insights layouts, never on the marketing site (base.njk), so its bare-element selectors stay isolated. ============================================================================ */ :root{ --paper:#F6F6F2; --paper-2:#EEEEE8; --ink:#191B1D; --muted:#61656B; --rule:#D7D8D1; --rule-strong:#C3C4BB; --accent:#1C4A6E; --accent-soft:rgba(28,74,110,.13); --accent-line:rgba(28,74,110,.42); --warm-soft:rgba(138,90,43,.16); --warm-line:rgba(138,90,43,.45); --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --col:38rem; --wide:60rem; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---- layout shell ---- */ .wrap{max-width:var(--wide);margin:0 auto;padding:0 1.6rem} .col{max-width:var(--col);margin-left:0} /* Vertical spacing for stacked blocks within a section */ .mt-tight{margin-top:1.5rem} .mt-block{margin-top:2.6rem} .mt-section{margin-top:clamp(3rem,6vw,4.5rem)} /* Inline muted qualifier, e.g. a "(narrative)" label inside a table cell */ .muted{color:var(--muted);font-weight:400} section{padding-block:clamp(2.1rem,4.5vw,3.3rem)} .rule{border:0;border-top:1px solid var(--rule);max-width:var(--wide);margin:0 auto} /* ---- header ---- */ .masthead{ border-bottom:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:saturate(120%) blur(6px); position:sticky;top:0;z-index:10; } .masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;padding-block:.85rem;gap:1rem} .wordmark{font-family:var(--mono);font-weight:500;letter-spacing:.02em;font-size:.95rem;color:var(--ink);text-decoration:none} .wordmark a{color:inherit;text-decoration:none} .wordmark a:hover{text-decoration:underline;text-underline-offset:2px} .wordmark b{color:var(--accent);font-weight:500} .masthead .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* Calibrate capability lockup: compass mark + wordmark, shown in the masthead on Calibrate reports (front matter: `calibrate: true`). */ .capability{display:inline-flex;align-items:center;gap:.42em;font-family:var(--mono);font-weight:500;font-size:1.02rem;letter-spacing:.01em;color:var(--accent);white-space:nowrap} .cap-mark{width:1.4em;height:1.4em;stroke:var(--accent);flex:none} /* ---- typography ---- */ .eyebrow{ font-family:var(--mono);font-size:.82rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); margin:0 0 1.1rem; } h1{ font-family:var(--serif);font-weight:400; font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:1.02; letter-spacing:-.018em;margin:0 0 1.1rem;max-width:18ch; } h2{ font-family:var(--serif);font-weight:500; font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.12; letter-spacing:-.012em;margin:0 0 1rem;max-width:22ch; } h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.01em;margin:0 0 .4rem} p{margin:0 0 1.15rem} .lede{ font-family:var(--serif);font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.5;color:#33363a;font-weight:400;max-width:34ch;margin-bottom:1.6rem; } .standfirst{font-size:1.18rem;line-height:1.6;color:#3a3d42;max-width:40ch} strong{font-weight:600} em{font-style:italic} a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:.05em .35em;border-radius:3px} /* ---- bulleted list with hanging indent ---- */ ul.bullets{list-style:none;padding:0;margin:0 0 1.15rem} ul.bullets li{position:relative;padding-left:1.35rem;margin:0 0 .6rem} ul.bullets li:last-child{margin-bottom:0} ul.bullets li::before{content:"ยท";position:absolute;left:.35rem;color:var(--muted);font-weight:600} /* ---- section header above a multi-panel section ---- */ .section-label{ font-family:var(--mono);font-size:1.05rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ink); margin:0 0 2.2rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule-strong); } /* ---- hero ---- */ .hero{padding-top:clamp(3rem,8vw,6rem);padding-bottom:clamp(2rem,5vw,3.5rem)} .meta{ font-family:var(--mono);font-size:.8rem;color:var(--muted); letter-spacing:.01em;margin-top:2rem;line-height:2; } .meta span{white-space:nowrap} .meta .dot{color:var(--rule-strong);padding:0 .55rem} /* ---- full-field single panels ---- */ /* one piece of content fills the whole field, not a left sub-column */ .hero .col,.result .col,.bymodel .col,.method>.wrap>.col{max-width:none} .hero h1,.hero .standfirst,.result h2,.bymodel h2,.method>.wrap>.col h2,.about h2{max-width:none} .bymodel .note{max-width:none} /* ---- key figures strip ---- */ .figs{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink);border-bottom:1px solid var(--rule); margin-top:2.6rem; } .fig{padding:1.3rem 1.2rem 1.4rem;border-left:1px solid var(--rule)} .fig:first-child{border-left:0;padding-left:0} .fig .n{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.7rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .fig .k{font-family:var(--sans);font-size:.82rem;color:var(--muted);line-height:1.4;margin-top:.6rem;display:block} /* ---- chart figure ---- */ .figure{margin:0;padding-top:.5rem} .chartframe{ background:#FBFBF8;border:1px solid var(--rule); padding:clamp(1rem,2.5vw,1.8rem) clamp(.6rem,2vw,1.4rem) clamp(.8rem,2vw,1.2rem); } .chart-head{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;margin:.2rem .4rem 1rem} .chart-title{font-family:var(--sans);font-weight:600;font-size:1rem} .legend{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--muted)} .legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:.45rem} .legend .ideal{border-top:2px dashed var(--ink)} .legend .model{border-top:2.5px solid var(--accent)} .legend .gap{height:11px;width:16px;background:var(--accent-soft);border:1px solid var(--accent-line);margin-right:.45rem;vertical-align:-2px} .legend .gap-warm{height:11px;width:16px;background:var(--warm-soft);border:1px solid var(--warm-line);margin-right:.45rem;vertical-align:-2px} svg.chart{display:block;width:100%;height:auto;font-family:var(--mono)} .ax{stroke:var(--ink);stroke-width:1} .grid{stroke:var(--rule);stroke-width:1} .tick-t{fill:var(--muted);font-size:13px} .axis-label{fill:var(--ink);font-size:13px;font-family:var(--sans);font-weight:600} .ideal-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:7 5} .mean-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round} .mean-dot{fill:var(--accent)} .ideal-dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.5} .wedge{fill:var(--accent-soft)} .wedge-warm{fill:var(--warm-soft)} .anno{fill:var(--ink);font-size:13px} .anno-accent{fill:var(--accent);font-size:13px;font-weight:500} .anno-mut{fill:var(--muted);font-size:12px} .leader{stroke:var(--muted);stroke-width:1} figcaption{font-family:var(--sans);font-size:.92rem;color:var(--muted);line-height:1.55;margin-top:1rem;max-width:none} figcaption b{color:var(--ink);font-weight:600} /* draw-on animation */ .ideal-line,.mean-line{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 1.5s ease} .ideal-line{stroke-dasharray:7 5;stroke-dashoffset:0;opacity:0;transition:opacity .9s ease .2s} .wedge,.anno,.anno-accent,.anno-mut,.leader,.mean-dot,.ideal-dot{opacity:0;transition:opacity .8s ease} .revealed .ideal-line{opacity:1} .revealed .mean-line{stroke-dashoffset:0} .revealed .wedge{opacity:1;transition-delay:.7s} .revealed .mean-dot,.revealed .ideal-dot{opacity:1;transition-delay:1s} .revealed .anno,.revealed .anno-accent,.revealed .anno-mut,.revealed .leader{opacity:1;transition-delay:1.1s} /* ---- band scale legend ---- */ .scale{display:flex;flex-wrap:wrap;gap:0;margin:.4rem 0 1.4rem;border:1px solid var(--rule);max-width:var(--col)} .scale .b{flex:1 1 0;min-width:70px;padding:.55rem .65rem;border-left:1px solid var(--rule);font-family:var(--mono);font-size:.78rem;text-align:center} .scale .b:first-child{border-left:0} .scale .b .lab{display:block;color:var(--muted);font-size:.66rem;margin-top:.2rem} /* ---- tables ---- */ .tablewrap{overflow-x:auto;margin:.5rem 0 1.1rem} .tablewrap.tight{overflow-x:visible} table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:34rem} table.tight{min-width:0} caption{text-align:left;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:.7rem} th,td{padding:.62rem .9rem;text-align:right;border-bottom:1px solid var(--rule)} th:first-child,td:first-child{text-align:left;padding-left:0} td:last-child,th:last-child{padding-right:0} thead th{ font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink); vertical-align:bottom; } tbody td{font-family:var(--mono);font-variant-numeric:tabular-nums} tbody td:first-child{font-family:var(--sans);font-weight:500} tbody tr:last-child td{border-bottom:1px solid var(--ink)} .lead-row td{background:var(--accent-soft)} /* inset the ranked table's edge columns so the highlight has breathing room */ .bymodel caption, .bymodel th:first-child,.bymodel td:first-child{padding-left:1rem} .bymodel th:last-child,.bymodel td:last-child{padding-right:1rem} .open-tag{font-family:var(--mono);font-size:.66rem;color:var(--accent);letter-spacing:.04em;display:block;font-weight:400} .pos{color:#8a5a2b} .neg{color:var(--accent)} .note{font-size:.92rem;color:var(--muted);max-width:46ch} /* Monospace prompt/quote callout with an accent rule */ .prompt-callout{font-family:var(--mono);font-size:.86rem;background:var(--paper-2);border-left:2px solid var(--accent);padding:.9rem 1rem;color:#3a3d42;line-height:1.6} /* ---- two-col on wide ---- */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .split .col{max-width:none} /* ---- closing ---- */ .about{background:var(--ink);color:#E9E9E3} .about .eyebrow{color:#7FA6C4} .about h2{color:#fff} .about strong{color:#fff} .about p{color:#C7C8C1;max-width:none} .about a{color:#9FC2DC} .about .col{max-width:none} footer{padding-block:2.4rem;color:var(--muted);font-family:var(--mono);font-size:.76rem;line-height:1.9} footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem} /* ============================================================================ INSIGHTS ADDITIONS โ€” not in the original standalone report ============================================================================ */ /* ---- article wrapper (light Markdown posts via insight-article.njk) ---- */ .article{padding-top:clamp(2.6rem,7vw,5rem);padding-bottom:clamp(2.5rem,6vw,4rem)} /* Match the full-width report layout. Custom reports opt every section out of the 38rem `--col` measure (see the .hero/.result/.bymodel rule above), so a Markdown post has to do the same or it sits visibly narrower than they do. */ .article .col{max-width:none} .article h1,.article .standfirst{max-width:none} /* ---- `.insight-body`: base scope so bare Markdown looks right ---- Markdown emits classless

/

/