/* ========================================================================== Editorial theme — HBR-style magazine layout, navy accent. Loaded LAST in on every page so it governs the cascade. Square corners, hairline rules, serif headlines and body, sans kickers. ========================================================================== */ :root { --bg: #ffffff; --surface: #ffffff; --ink: #16181d; --muted: #5c6068; --line: #d9dadd; --rule-heavy: #16181d; --accent: #1f3864; --accent-soft: #eef2f8; --nav-bg: rgba(255, 255, 255, 0.94); --serif: 'Source Serif 4', 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --measure: 39rem; } [data-theme="dark"] { --bg: #14161a; --surface: #191c21; --ink: #e9eaed; --muted: #9aa0a9; --line: #2c3038; --rule-heavy: #e9eaed; --accent: #9dbcf0; --accent-soft: #1d2637; --nav-bg: rgba(20, 22, 26, 0.94); } /* ---------- base ---------- */ body { font-family: var(--serif); background: var(--bg); color: var(--ink); font-size: 19px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* HBR is square. Strip the rounded, soft-shadow look site-wide. */ .post-subscribe, .post-author, .related-card, .idea-brief, .stat-row, .stat-cell, .start-here, .subscribe, .contact-item, .tool, .callout, .exhibit, .dossier, .failure-card, .layer-row, .timeline-item, .scenario-table-wrap, .toc, .series-note, .alert, .q, .opt, .stat-card, .blog-item.note, .cta, input, button, .btn, .share-btn, .post-tag, .tag, .photo-wrap, .closing-photo, .post-img, .exhibit-table, .scenario-table, .verdict, .scorebar, .note-badge { border-radius: 0 !important; box-shadow: none !important; } .container, .wrap, .page { max-width: 46rem; } main, main.container, main.wrap, main.page { padding-top: 52px; padding-bottom: 80px; } .tool-cost, .free, .go, .layer-tag, .layer-badge, .timeline-badge, .note-badge, .q-ref { border-radius: 0 !important; } .tool-cost, .free { font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } /* ---------- masthead ---------- */ header.nav { background: var(--nav-bg); border-bottom: 1px solid var(--rule-heavy); backdrop-filter: saturate(140%) blur(8px); } .nav-inner { padding: 15px 28px; } .brand, .logotype { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); } nav.tabs { gap: 2px; } nav.tabs a { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); border-radius: 0; padding: 8px 11px; background: transparent; } nav.tabs a:hover { color: var(--accent); background: transparent; } nav.tabs a.active { color: var(--accent); background: transparent; box-shadow: inset 0 -2px 0 var(--accent); } .theme-toggle { border-radius: 0; border: 1px solid var(--line); } /* the AI Act page has its own header markup and its own colour variables */ :root, [data-theme="dark"] { --navy: var(--accent); --pill: var(--accent-soft); --paper: var(--bg); --hair: var(--line); --grey: var(--muted); } body > header:not(.nav) { background: var(--nav-bg); border-bottom: 1px solid var(--rule-heavy); } .header-inner { max-width: 960px !important; padding: 15px 28px; flex-wrap: nowrap; } body > header:not(.nav) nav a { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); border-radius: 0; padding: 8px 11px; background: transparent; } body > header:not(.nav) nav a:hover { background: transparent; color: var(--accent); } body > header:not(.nav) nav a.active { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } /* ---------- editorial primitives ---------- */ /* kicker / eyebrow — the small caps label above a headline */ .post-meta, .latest-label, .sh-label, .refs-label, .ib-label, .toc-label, .section-eyebrow, .kicker, .post-related .label, .post-share .share-label, .updated, .exhibit-title, .dossier-label, .stat-src, .scenario-label { font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.14em !important; color: var(--accent); } .post-meta { color: var(--muted); margin-bottom: 14px; } .post-meta .reading-time { border-left: 1px solid var(--line); } /* headlines */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); letter-spacing: -0.018em; font-weight: 700; } .post h1, .blog-post h1 { font-family: var(--serif); font-weight: 700; font-size: 47px; line-height: 1.08; letter-spacing: -0.024em; margin: 0 0 18px; } .post-dek { font-family: var(--serif); font-style: normal; font-size: 21.5px; line-height: 1.45; color: var(--muted); margin: 0 0 26px; font-weight: 400; } /* section heads inside an article get a rule above, HBR-style */ .post h2 { font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.25; letter-spacing: -0.015em; margin: 46px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); } /* a level below: no rule, smaller — used where an article nests subsections */ .post h3 { font-family: var(--serif); font-weight: 700; font-size: 20.5px; line-height: 1.3; letter-spacing: -0.012em; margin: 34px 0 10px; padding-top: 0; border-top: 0; } .post p, .post li { font-family: var(--serif); font-size: 19px; line-height: 1.66; } .post p { margin: 0 0 20px; } .post strong { font-weight: 700; } /* opening paragraph carries a little more weight */ .post > p:first-of-type, .lede p:first-child { font-size: 20.5px; line-height: 1.6; } /* pull quote */ .post blockquote { font-family: var(--serif); font-style: normal; font-weight: 700; font-size: 26px; line-height: 1.32; letter-spacing: -0.018em; color: var(--ink); border-left: 0; border-top: 3px solid var(--rule-heavy); border-bottom: 1px solid var(--line); padding: 22px 0 24px; margin: 42px 0; } /* tags read as small caps labels, not pills */ .post-tags { gap: 0; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-heavy); } .post-tag, .tag { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); border: 0; background: transparent; padding: 0 14px 0 0; margin-right: 0; } .blog-item .tags { gap: 0; margin-top: 10px; } .blog-item .tag, .post-tags .post-tag { border: 0; background: transparent; border-radius: 0; padding: 0 16px 0 0; font-size: 10.5px; color: var(--muted); } .blog-item .tag:hover, .post-tag:hover { color: var(--accent); } /* boxed asides: idea brief, TOC, callouts, series notes */ .idea-brief, .toc, .callout, .series-note, .alert { background: var(--accent-soft); border: 0; border-top: 3px solid var(--accent); border-left: 0; padding: 20px 22px 22px; margin: 0 0 34px; } .idea-brief ul li, .toc a, .callout p { font-family: var(--serif); } .idea-brief ul li { font-size: 16.5px; } /* statistics band */ .stat-row { border: 0; border-top: 3px solid var(--rule-heavy); border-bottom: 1px solid var(--line); background: transparent; gap: 0; margin: 40px 0; } .stat-cell { background: transparent; text-align: left; padding: 20px 24px 22px 0; } .stat-num { font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; margin-bottom: 10px; } .stat-label { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); } /* consistency pass — some pages set their own alignment or stat styling */ .post p, .post li, .post ol li, .about p, .about li, .lede p, .idea-brief li { text-align: left !important; text-justify: auto; hyphens: none; } .stat-card { background: transparent !important; border: 0 !important; text-align: left !important; padding: 20px 24px 22px 0 !important; } .stat-card .stat-num, .stat-num { font-family: var(--serif); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; } .stat-src { color: var(--muted) !important; margin-top: 8px; } /* references */ .refs { border-top: 3px solid var(--rule-heavy); padding-top: 22px; } .refs li { font-family: var(--sans); font-size: 13px; } .disclaimer { font-family: var(--sans); font-size: 12.5px; font-style: italic; } /* ---------- home ---------- */ /* main already supplies the space under the masthead */ #home, #blog, #about, #contact { padding-top: 0 !important; } #home .hero { display: grid; grid-template-columns: 132px 1fr; column-gap: 30px; row-gap: 0; align-content: start; align-items: start; text-align: left; padding: 0 0 34px; border-bottom: 3px solid var(--rule-heavy); margin-bottom: 34px; } #home .photo-wrap { grid-column: 1; grid-row: 1 / span 3; width: 132px; height: 132px; border-radius: 50% !important; border: 1px solid var(--line); overflow: hidden; margin: 6px 0 0; background: var(--accent-soft); } #home .photo-wrap img { border-radius: 50%; } #home .hero > *:not(.photo-wrap) { grid-column: 2; } #home .photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } #home .hero h1 { font-size: 46px; line-height: 1.05; letter-spacing: -0.028em; margin: 0 0 10px; font-weight: 700; } #home .tagline { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); font-style: normal; margin-bottom: 14px; } #home .tagline .sep { color: var(--line); } #home .hero-intro { font-family: var(--serif); font-size: 18.5px; color: var(--muted); margin: 0; max-width: 34rem; } #home .hero h1 { margin: 0 0 12px !important; } #home .tagline { margin: 0 0 16px !important; } .latest-label { padding-bottom: 10px; border-bottom: 1px solid var(--rule-heavy); display: block; margin-bottom: 4px; } .latest-item { border-bottom: 1px solid var(--line); padding: 16px 0; } .latest-item .date { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin-bottom: 5px; } .latest-item .t { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; } .latest-item:hover .t { color: var(--accent); } .all-posts, .about-cta a, .blog-cta a { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } /* ---------- blog index ---------- */ #blog h1, #about h1, #contact h1 { font-size: 44px; letter-spacing: -0.025em; font-weight: 700; padding-bottom: 14px; border-bottom: 3px solid var(--rule-heavy); margin-bottom: 18px; } .start-here { background: var(--accent-soft); border: 0; border-top: 3px solid var(--accent); padding: 18px 22px 20px; } .start-here a { font-family: var(--serif); font-weight: 700; } .blog-search input { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 13px; background: transparent; } .blog-item { border-bottom: 1px solid var(--line); padding: 26px 0; } .blog-item .date { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); margin-bottom: 7px; } .blog-item h2, .blog-item h3 { font-family: var(--serif); font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; border: 0; padding: 0; } .blog-item p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--muted); } /* ---------- about / contact ---------- */ .about p, .about li { font-family: var(--serif); font-size: 19px; } .about h2, .about h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); } .change-agent { border: 0; border-top: 3px solid var(--accent); background: var(--accent-soft); font-family: var(--serif); font-size: 20px; padding: 20px 22px; } .contact-item { border: 0; border-top: 1px solid var(--line); padding: 16px 0; background: transparent; } .contact-item .label { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); } /* ---------- article furniture ---------- */ .back-link { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); } .post-share, .post-related { border-top: 3px solid var(--rule-heavy); } .share-btn { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--line); border-radius: 0; } .discuss-note { font-family: var(--serif); font-size: 16px; } .post-subscribe, .subscribe { background: var(--accent-soft); border: 0; border-top: 3px solid var(--accent); padding: 24px 24px 22px; } .post-subscribe h3, .subscribe h3 { font-family: var(--serif); font-size: 25px; font-weight: 700; border: 0; padding: 0; margin: 0 0 6px; } .post-subscribe p, .subscribe p { font-family: var(--serif); font-size: 16.5px; } input[type=email] { font-family: var(--sans); font-size: 14px; border-radius: 0; } .post-subscribe button, .subscribe button, .btn-primary, .start-btn { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; border-radius: 0; } .post-author { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 24px 0 0; } .post-author .photo { border-radius: 0; border: 1px solid var(--line); box-shadow: none; width: 76px; height: 76px; } .post-author .name { font-family: var(--serif); font-size: 19px; font-weight: 700; } .post-author p { font-family: var(--serif); font-size: 16px; } .post-author a { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; } .related-card { border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; background: transparent; } .related-card:hover { border-color: var(--accent); } .related-card .date { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); } .related-card .title { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.25; } /* ---------- tools / ai-act / 404 ---------- */ .tool, .exhibit, .dossier, .failure-card, .q, .opt, .stat-card, .timeline-item { border-radius: 0; } .tool { border: 0; border-top: 1px solid var(--line); background: transparent; padding: 22px 0; } .tool-name, .section-title, .exhibit-title, .dossier-title, .failure-title, .layer-name { font-family: var(--serif); font-weight: 700; } .tool-for, .tool-cost, .lede { font-family: var(--serif); } .four-oh-four h1, .four-oh-four .code, .four-oh-four p { font-family: var(--serif); } .four-oh-four h1, .four-oh-four .code { font-weight: 700; letter-spacing: -0.03em; } .btn, .btn-primary, .btn-secondary, .btn-ghost { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; border-radius: 0; } /* the last few rules that still named Fraunces directly */ .change-agent, .change-agent em, .about em, .timeline-badge, main h2 { font-family: var(--serif) !important; } /* ---------- footer ---------- */ footer { border-top: 3px solid var(--rule-heavy); padding: 30px 0 40px; } .footer-nav a, footer { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.06em; } .footer-nav a { text-transform: uppercase; font-weight: 600; letter-spacing: 0.12em; } /* ---------- responsive ---------- */ @media (max-width: 700px) { body { font-size: 18px; } .post h1, .blog-post h1 { font-size: 33px; } #home .hero { grid-template-columns: 1fr; gap: 18px; } #home .photo-wrap { width: 104px; height: 104px; } #home .hero h1 { font-size: 34px; } #blog h1, #about h1, #contact h1 { font-size: 32px; } .blog-item h2, .blog-item h3 { font-size: 22px; } .post blockquote { font-size: 21px; } .stat-row { grid-template-columns: 1fr; } .stat-cell { padding: 18px 0; border-bottom: 1px solid var(--line); } .post-dek { font-size: 19px; } } @media print { .post h3 { border-top: 1px solid #000; } body { font-family: var(--serif); } }