/* ISA After Hours — Blog (static, public). Light theme only. Palette derived from the site tokens in src/index.css (primary hsl(152 69% 18%), card hsl(150 20% 96%), muted-foreground hsl(150 12% 38%)). */ :root { --paper: #fbfcfa; --card: #ffffff; --ink: #14231b; --green: #0e4d31; --green-deep: #082e1e; --mint: #e3efe8; --line: #d9e3dc; --muted: #566860; /* --gold is an ACCENT ONLY: rules, borders, hairlines. It is 3.24:1 on #ffffff and 3.15:1 on --paper, which fails WCAG 2 AA (4.5:1) for text. --gold-text is the same hue darkened until it passes: 6.35:1 on #ffffff, 6.17:1 on --paper, 5.38:1 on --mint. Every gold-coloured TEXT rule below (eyebrows, fact labels) uses --gold-text; never --gold. */ --gold: #b8862b; --gold-text: #7a5a1a; /* --gold-on-dark is the same hue lifted for the hero overlay: --gold-text is unreadable there and --gold measures only ~4.0:1 on the gradient, which fails AA. This one measures 6.8:1 against the darkest gradient stop. Use it ONLY over --scrim; on paper it fails badly. */ --gold-on-dark: #e6bd6a; /* The hero overlay ink. Deep green-black rather than pure black so the gradient reads as our green, not as a generic photo scrim. */ --scrim: 6, 30, 20; --font-display: "Archivo Black", "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --shell: 1100px; --col: 720px; --rail: 240px; --gut: 4rem; --r-lg: 24px; --r-md: 14px; --r-sm: 10px; } * { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Body stays a BLOCK box on purpose. Making it a flex/grid container lets .tablewrap's 34rem min-content propagate up through
and blow the page out horizontally at 375px. The footer is pinned to the bottom of a short page (the blog index) with the sticky top:100vh trick instead, which needs no change to body's formatting context. */ min-height: 100vh; } /* Paper texture — a faint green grid, drawn with gradients only (no image files). It lives on a FIXED pseudo-element behind the content instead of on body's own background so that axe still resolves every text node against a solid --paper: a background-image on would turn every colour-contrast check on the page into "incomplete" and quietly stop proving anything. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(14, 77, 49, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 77, 49, 0.045) 1px, transparent 1px); background-size: 64px 64px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration: none; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { text-wrap: balance; } /* ---------------------------------------------------------------- top bar */ .topbar { position: sticky; top: 0; z-index: 30; background: rgba(251, 252, 250, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: var(--shell); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .brand { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: 0.005em; color: var(--green); text-decoration: none; } .brand small { font-family: var(--font-body); font-weight: 500; color: var(--muted); margin-inline-start: 0.45rem; } .topnav { display: flex; gap: 1.25rem; } .topnav a { font-size: 0.9rem; font-weight: 700; color: var(--muted); text-decoration: none; } .topnav a:hover { color: var(--green); } /* ------------------------------------------------------------------ shell */ .shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; } .wrap { max-width: var(--shell); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; } /* --------------------------------------------------------------- post head */ .posthead { padding: 3.5rem 0 0; } .metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin: 0 0 1.4rem; } .pill { display: inline-flex; align-items: center; background: var(--mint); color: var(--green); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .metarow .dot { color: var(--line); } .metarow time, .metarow .readtime { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 0.5rem; } h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.15rem, 5.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.018em; margin: 0 0 1rem; max-width: 22ch; } .lede { font-size: clamp(1.1rem, 2.2vw, 1.32rem); line-height: 1.5; color: var(--muted); margin: 0 0 1.5rem; max-width: 60ch; } .byline { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; color: var(--muted); font-size: 0.92rem; margin: 0 0 2.25rem; } .byline b { color: var(--ink); font-weight: 700; } /* ------------------------------------------------------------------- hero */ /* The hero IS the title stage: the image is full-bleed inside the rounded box and the eyebrow, the h1 and the date sit on it over a bottom gradient. * * The 16:9 box is set by a zero-width ::before with percentage padding rather * than by `aspect-ratio`, because aspect-ratio gives the box a DEFINITE height * that a long title would simply overflow and get clipped by `overflow:hidden`. * The pseudo-element sets a MINIMUM instead, so 16:9 is what you normally get * and a seven-line title on a phone just makes the stage taller. */ .hero { position: relative; display: flex; align-items: flex-end; margin: 0 0 2.25rem; border-radius: var(--r-lg); overflow: hidden; background: var(--green-deep); box-shadow: 0 24px 60px -28px rgba(8, 46, 30, 0.45); } .hero::before { content: ""; flex: none; width: 0; padding-top: 56.25%; /* 16:9 floor */ } .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The scrim's tall top padding is the fade zone. Because the gradient stops are percentages of THIS box, the text always lands in the bottom ~65% — the part that is at least 88% opaque — no matter how many lines the title runs to. */ .hero-cover { position: relative; width: 100%; /* MEASURED, not guessed. With a 5.5rem fade zone and the strong band ending at 60%, the eyebrow — the highest line in the block — landed at ~0.64 opacity and read 2.61:1 on the brightest photograph (google-pics), well under the 4.5:1 AA floor. Deepening the band to 70% and lengthening the fade zone to 8rem puts every line of the block at >=0.85 opacity; the same eyebrow now measures 7.87:1. See the table in hero-contrast.mjs's output. */ padding: 8rem 2.25rem 2rem; background: linear-gradient( to top, rgba(var(--scrim), 0.95) 0%, rgba(var(--scrim), 0.93) 70%, rgba(var(--scrim), 0.5) 88%, rgba(var(--scrim), 0) 100% ); } .hero-cover .hero-eyebrow { display: block; margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-on-dark); } .hero-cover h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; margin: 0 0 0.9rem; /* Wide enough that the longest headline we publish (17 words) still lands in four lines instead of five — a five-line title pushes the scrim up over most of the photograph. */ max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(var(--scrim), 0.55); } .hero-cover .metarow { margin: 0; gap: 0.4rem 0.7rem; } .hero-cover .metarow time, .hero-cover .metarow .readtime { color: #dbeae2; } /* Solid, not a 55% white: a translucent separator measured barely 4:1 on the lighter photographs, and a dot is still text as far as WCAG is concerned. */ .hero-cover .metarow .dot { color: #cddfd5; } /* ----------------------------------------------------------------- layout */ .layout { display: block; padding-bottom: 5rem; } /* Two TOCs, one shown per breakpoint: a
that is genuinely collapsed on phones, and a permanently open sticky