/* The library index, and the article header. * * The index is deliberately NOT in the campaign system: no paper ground, no * brass, no serif display, no stat cards. It is a white page with a headline, a * row of filters and a grid of pictures, because that is what an article index * is for and the editorial furniture was getting in the way of the only thing * on the page anyone came for — the list. * * Progressive enhancement: the filter row is hidden until the script adds * .lib-ready, so with JavaScript off you get all 53 cards and no dead controls. */ .lib-page { background: #fff; padding-block: clamp(34px, 5vw, 76px) clamp(48px, 6vw, 96px); } .lib-page * { font-family: var(--sans); } .lib-title { margin: 0; font-weight: 500; letter-spacing: -.032em; line-height: 1; font-size: clamp(42px, 7vw, 82px); color: #0d0d0d; } .lib-sub { margin: clamp(14px, 1.6vw, 20px) 0 0; max-width: 62ch; color: #5d5d5d; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; } /* ------------------------------------------------------------- the filters */ .lib-tabs { display: none; margin: clamp(26px, 3.4vw, 44px) 0 clamp(22px, 2.6vw, 34px); padding-bottom: 2px; border-bottom: 1px solid #e6e6e6; overflow-x: auto; scrollbar-width: none; } .lib-tabs::-webkit-scrollbar { display: none; } .lib-ready .lib-tabs { display: flex; gap: clamp(16px, 2vw, 30px); } .lib-tabs button { flex: none; padding: 0 0 13px; border: 0; background: none; cursor: pointer; color: #6b6b6b; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.2; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -3px; transition: color .2s ease; } .lib-tabs button:hover { color: #0d0d0d; } .lib-tabs button[aria-selected="true"] { color: #0d0d0d; font-weight: 500; border-bottom-color: #0d0d0d; } /* ---------------------------------------------------------------- the grid */ .lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 28px); margin-top: clamp(20px, 2.4vw, 30px); } .lib-grid > a { display: block; text-decoration: none; color: inherit; } .lib-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #f1f1f1; transition: opacity .25s ease; } .lib-grid > a:hover img, .lib-grid > a:focus-visible img { opacity: .86; } .lib-grid h2 { margin: 15px 0 0; font-weight: 400; letter-spacing: -.012em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.32; color: #0d0d0d; text-wrap: balance; } .lib-grid p { margin: 9px 0 0; color: #6b6b6b; font-size: 13px; line-height: 1.2; } .lib-empty { display: none; margin-top: 40px; color: #6b6b6b; font-size: 15px; } /* .lib-page resets the family on everything, which also flattens the link colour inherited from the campaign sheet. Give links back a visible state. */ .lib-sub a { color: #0d0d0d; text-decoration: underline; text-decoration-color: #c9c9c9; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; } .lib-sub a:hover, .lib-sub a:focus-visible { text-decoration-color: #0d0d0d; } @media (max-width: 900px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .lib-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- the article A news article: one column, top to bottom, prose with subheads and a picture. It shares no component with the campaign pages — the alternating full-width bands, the two-column section heads, the four-cell scoreboard and the FAQ accordion are a marketing page's furniture, and on a 1,200-word read they were the loudest thing on the screen. Scoped on , the same way compare.css scopes its own page. */ .post-page body { background: #fff; } .post-page main { display: block; } .post { max-width: 720px; margin: 0 auto; padding: clamp(28px, 4.6vw, 60px) 20px clamp(44px, 6vw, 88px); font-family: var(--sans); color: #22201e; } .post-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(14px, 1.6vw, 20px); color: #6b6b6b; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; } .post-kicker span::before { content: "\00B7"; margin-right: 8px; } .post h1 { margin: 0; font-family: var(--sans); font-weight: 500; color: #0d0d0d; font-size: clamp(30px, 4.4vw, 49px); line-height: 1.07; letter-spacing: -.028em; text-wrap: balance; } .post-lede { margin: clamp(15px, 1.8vw, 22px) 0 0; color: #3d3d3d; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; } .post-lede b { color: #0d0d0d; font-weight: 600; } .post-fig { margin: clamp(24px, 3.2vw, 40px) 0 0; } .post-fig img { display: block; width: 100%; height: auto; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; background: #f1f1f1; } .post-body { margin-top: clamp(26px, 3.2vw, 42px); } .post-body p { margin: 0 0 19px; font-size: 17px; line-height: 1.72; } .post-body h2 { margin: clamp(36px, 4.2vw, 52px) 0 14px; font-family: var(--sans); font-weight: 500; color: #0d0d0d; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -.022em; } .post-body h3 { margin: 28px 0 7px; font-family: var(--sans); font-weight: 600; color: #0d0d0d; font-size: 17px; line-height: 1.36; letter-spacing: -.008em; } .post-body h3 + p { margin-top: 0; } .post-body b { color: #0d0d0d; font-weight: 600; } .post-body a { color: #0d0d0d; text-decoration: underline; text-decoration-color: #c4c4c4; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post-body a:hover { text-decoration-color: #0d0d0d; } /* The templates are literal text someone is meant to copy, so they are set apart from the prose rather than styled as emphasis. */ .post-body code { padding: 2px 6px; border-radius: 4px; background: #f4f4f2; color: #0d0d0d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; line-height: 1.85; overflow-wrap: anywhere; } .post-small { font-size: 14px; line-height: 1.62; color: #6b6b6b; } .post-note { margin: clamp(32px, 4vw, 46px) 0 0; padding-top: 18px; border-top: 1px solid #ededed; font-size: 14.5px; line-height: 1.65; color: #6b6b6b; } .post-next { margin: 0; padding-left: 19px; } .post-next li { margin-bottom: 9px; font-size: 16px; line-height: 1.55; color: #6b6b6b; } .post-next a { font-weight: 500; } .post-cta { margin-top: clamp(38px, 5vw, 62px); padding-top: 26px; border-top: 1px solid #e6e6e6; } .post-cta p { margin: 0; font-size: 15px; line-height: 1.65; color: #5d5d5d; } .post-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px !important; } .post-btn { display: inline-block; padding: 11px 21px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 14.5px; font-weight: 500; text-decoration: none; border: 1px solid #0d0d0d; transition: opacity .2s ease; } .post-btn:hover { opacity: .84; } .post-btn-quiet { background: #fff; color: #0d0d0d; border-color: #d9d9d9; } .post-btn-quiet:hover { border-color: #0d0d0d; opacity: 1; }