/* ========================================================================== Alembic Blog — /blog index + /blog/ reading page. A new file, following industry-marketing.css's precedent: marketing.css is consumed by 19 other pages and is not edited here. Load order in : /fonts/fonts.css /css/marketing.css (palette, fonts, .nav, .cta-section, focus) /css/industry-marketing.css (--im-* scale, .im-shell/.im-eyebrow/ .im-breadcrumbs, .im-page reduce blanket) /css/blog.css (this file) REQUIRED MARKUP CONTRACT — the page is broken without both of these, and tests/unit/marketing-blog.test.ts pins them: 1. . --im-max / --im-10 are declared only on .im-page; without it .im-shell's width resolves to `auto` and the page loses its measure AND its gutters. 2. renderCtaNoscriptFallback() in . marketing.css hides .cta-section's children at opacity:0 unconditionally and waits for a scroll observer; with scripting off the final band never appears. No .al-btn anywhere. No marketing page uses the dot-morph canvas button system and marketing.css does not style .al-btn — .cta-button and .cta-secondary are the marketing precedent. No --copper. Its token comment restricts it to pain/limitations eyebrows, the pull-quote mark + left rule, and 01/02/03 numerals, and states the rule the restriction exists for: "Semantic, not decorative." A blog post has no pain section, and a quotation is neither "what Alembic does" (green) nor "what today costs you" (copper). Ink is the default; this surface earns no pigment. The blockquote rule below is --ink-200. ========================================================================== */ .page-blog { /* Reading measure. NOT var(--im-measure) — DM Sans's '0' advance is 0.6560em (measured from dm-sans-latin.woff2 with fontTools) while the mean prose advance is 0.4595em, so `ch` over-counts characters by 1.4278x and --im-measure: 62ch actually resolves to 88.5 characters. 66 chars x 0.4595em = 30.33em; at the 19px desktop body size that is 576px. Declared in rem so the h1 and the prose share one declared column despite different font sizes. Worst case across the viewport range is 70.1 characters at ~608px, where the measure and the shell cross over. */ --blog-measure: 36rem; /* Display column. 576px at 48px Fraunces is 26 characters — headlines would tower. 704px gives 32.3 at 48px / 38.8 at 40px. Display wider than text. */ --blog-display-measure: 44rem; /* Body size. 17px at 390 -> 19px at >=922. Solve: 0.98rem + 0.36vw hits 19px at V=922 and the 17px floor at V<=367. */ --blog-body: clamp(1.0625rem, 0.98rem + 0.36vw, 1.1875rem); /* Card hover tone. NOT --action-wash: at its literal 8% light / 12% dark it is lopsided (dL* 3.55 light vs 7.25 dark). A flat 10% of --action — which is itself theme-dependent (#4A8B6A light / #5C9C7C dark) — lands at dL* 4.42 light / 5.90 dark, perceptible and near-symmetric. light: #FAF9F7 -> #E8EEE9 dark: #14110D -> #1B1F18 This is the reason hover is NOT "lighter": in light theme --card is #FFFFFF and --paper is #FAF9F7, so any "raise on hover" paints white on white. Tone, computed differently in both themes. Never border-color. */ --blog-hover-wash: color-mix(in srgb, var(--action) 10%, transparent); /* .nav is position:sticky, height 64px. h2/h3 carry ids (render-markdown.ts emits them), so a #heading deep link lands underneath the nav without this. --im-6 is the breathing room above the landed heading. */ --blog-anchor-offset: calc(64px + var(--im-6)); /* Declared, not inherited-by-luck. Both variable subsets default opsz to 9 (a caption cut); `auto` is what raises Fraunces to a display cut at 48px and DM Sans to a text cut at 19px. Do NOT set font-optical-sizing:none, and do NOT use font-variation-settings anywhere on this page — either one silently reverts both faces to their 9pt cut. */ font-optical-sizing: auto; } /* ══ Index hero + post header ═══════════════════════════════════════════════ Both wrap an .im-shell, so padding lives on the outer element. --im-16 top matches .im-hero; the bottom is --im-10 rather than --im-12 because a standfirst leads straight into the list/prose with no section rule between. .im-eyebrow is inherited from industry-marketing.css unchanged — mono, --action-text, 6px --action dot. Nothing to restyle. */ .blog-index-hero, .blog-post-header { padding-block: var(--im-16) var(--im-10); } .blog-index-hero h1, .blog-post-header h1 { max-width: var(--blog-display-measure); margin: 0; color: var(--ink-900); font-family: var(--font-display); /* 34px -> 48px. Deliberately NOT --im-display's 34->54: an industry hero is a pitch, an article title is an article title, and 54px in a 704px column is 28 characters. */ font-size: clamp(2.125rem, 1.72rem + 1.72vw, 3rem); font-weight: 400; /* Fraunces subset is 400-500 only. 600 = synthesised. */ font-style: italic; /* matches .im-hero h1 / .cta-headline */ line-height: var(--im-lh-display); /* 1.12 */ letter-spacing: var(--im-track-display); /* -0.02em */ text-wrap: balance; } /* Standfirst = the frontmatter `description`, which is simultaneously the meta description. One string, two jobs, zero duplication (Law 3). --ink-700 rather than --ink-600 because it is the second-loudest thing on the page. */ .blog-standfirst, .blog-post-standfirst { max-width: var(--blog-measure); margin: var(--im-5) 0 0; color: var(--ink-700); font-size: clamp(1.1875rem, 1.13rem + 0.24vw, 1.3125rem); /* 19 -> 21px */ line-height: var(--im-lh-lead); /* 1.6 */ text-wrap: pretty; /* orphan control; no-ops where unsupported */ } /* Byline is a sentence, so it stays in the body face. The card date below is a standalone datum, so it goes mono. Same information, different grammatical role, different treatment — mono is for data and labels, sans is for sentences, which is the rule the rest of the site already follows. */ .blog-post-byline { max-width: var(--blog-measure); margin: var(--im-4) 0 0; color: var(--ink-600); font-size: var(--im-small); /* 15px */ line-height: 1.5; } /* ══ Index list ════════════════════════════════════════════════════════════ Rule-separated rows, not bordered cards. Three reasons, in order: (a) DESIGN_SYSTEM § Cards: "a hard 1px frame reads cheap", prefer the borderless form. .ds-raise / --ri-raise-shadow are product tokens and do not exist on the marketing surface, and --im-shadow-lift on a full-width row reads as a floating slab, so the borderless form here is the rule stack, not a shadow. (b) .im-related-card — the nearest existing marketing card — expresses hover as `border-color: var(--action)`, which the current Law explicitly forbids ("hover/open express as tone, never border-color"). Copying it would import a known violation. (c) A blog index is a list of essays, not a grid of features. The row stack is the same grammar .im-faq-item already uses on this site: padding- block + one hairline, on --paper. The class name .blog-card is inherited from the markup contract and from tests/unit/marketing-blog.test.ts. It is a row. Renaming it would cost test churn for nothing; this comment is the correction. */ .blog-list { max-width: var(--blog-measure); margin: 0 0 var(--im-16); padding: 0; list-style: none; } .blog-card { margin: 0; } .blog-card-link { display: block; position: relative; /* The negative inline margin lets the hover tone and the hairline extend --im-4 past the text column on both sides, so the row reads as a target rather than as a tinted paragraph. At <=40rem the shell gutter is also 16px, so the row lands exactly flush with the viewport edge — no overflow, no horizontal scrollbar. */ margin-inline: calc(var(--im-4) * -1); padding: var(--im-6) var(--im-4); /* border-block-START, first row suppressed: the list reads as separated, not boxed, and the .cta-section below already supplies a floor (it carries its own border-top and a --card background). Same shape as .feature-block:first-of-type. --card-border, not --mock-hairline: the latter is scoped by its own token comment to "mockup-internal hairlines only". Measured 1.23:1 light / 1.24:1 dark against --paper — decorative, no SC applies, and consistency with .im-faq-item beats a local win. */ border-block-start: 1px solid var(--card-border); border-radius: var(--im-r-md); color: var(--ink-900); text-decoration: none; transition: background-color 0.2s var(--ease-standard); } .blog-card:first-child .blog-card-link { border-block-start: 0; } .blog-card-link:hover { background-color: var(--blog-hover-wash); } /* outline-offset is NEGATIVE here, not the site's usual +2px: the row already bleeds --im-4 past the text and sits flush to the viewport edge at <=40rem, where a +2px ring would be clipped. Precedent: .ph-banner:focus-visible uses -3px for the same reason. --action measures 3.84:1 light / 5.83:1 dark on --paper and 3.44 / 5.18 on the hover wash — clears the 3:1 non-text floor in every combination. */ .blog-card-link:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; background-color: var(--blog-hover-wash); } /* Date: mono, --ink-600, sentence case. This is the .im-eyebrow slot — a small mono line above a heading — minus the dot, because the dot is --action and marks a section label. A date is not a section label. No "4 min read", no progress ring, no glyph: Law 2 wants the real datum, and the real datum is the publication date, which is also what