/* The Expert Index site styles, from Jeff's mockups (profile, post, home) on the Expert Index design system. */
/* Tokens: The Expert Index design system */
:root, [data-theme="light"] {
  --surface: #FBFAF7; --surface-raised: #FFFFFF; --surface-sunken: #F1EFE9;
  --portrait: #E7E3D9; --portrait-ink: #8A877F;
  --ink: #16181D; --ink-body: #2A2D33; --ink-sub: #3A3D44; --ink-muted: #5B5F66;
  --rule: #D9D6CE; --rule-strong: var(--ink);
  --accent: #8A2B1F; --on-accent: #FBFAF7;
  --inverse: #16181D; --on-inverse: #FBFAF7; --on-inverse-muted: #C9C6BE;
  --focus: #1F4E8A;
}
[data-theme="dark"] {
  --surface: #121417; --surface-raised: #1A1D21; --surface-sunken: #0D0F11;
  --portrait: #24282E; --portrait-ink: #6B7078;
  --ink: #EDEAE3; --ink-body: #D2CEC5; --ink-sub: #BDB9B0; --ink-muted: #A2A7AF;
  --rule: #2E3238;
  --accent: #D9735E; --on-accent: #121417;
  --inverse: #EDEAE3; --on-inverse: #121417; --on-inverse-muted: #4A4D53;
  --focus: #8FB3E8;
}
:root {
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px;
  --container: 1120px; --measure: 640px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.6 var(--sans); }
a { color: inherit; text-underline-offset: 3px; transition: color 150ms; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); background: var(--inverse); color: var(--on-inverse); padding: var(--space-2) var(--space-3); z-index: 10; }
.label { margin: 0; font: 600 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.meta { margin: 0 0 var(--space-2); font: 400 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* Header */
.site-header { border-bottom: 1px solid var(--rule-strong); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.logo { display: block; line-height: 0; }
.logo svg { height: 28px; width: auto; }
.lg-acc { fill: var(--accent); } .lg-cut { fill: var(--surface); } .lg-ink { fill: var(--ink); }
.nav-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font: 400 13px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.nav a { text-decoration: none; display: inline-block; padding: 13px 0; }
.nav a:hover { text-decoration: underline; }
.toggle { width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .i-moon, [data-theme="light"] .i-sun { display: none; }

/* Hero */
.crumbs { margin: var(--space-6) 0 var(--space-6); font-size: 13px; color: var(--ink-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); }
.hero { display: flex; flex-wrap: wrap; gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--rule); }
.portrait { flex: 0 0 auto; width: 168px; height: 210px; background: var(--portrait); color: var(--portrait-ink); display: grid; place-items: center; font: 400 56px/1 var(--serif); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { flex: 999 1 520px; min-width: 0; }
.kicker { color: var(--accent); }
h1 { margin: var(--space-3) 0 var(--space-3); font: 500 64px/1.03 var(--serif); letter-spacing: -.02em; }
.standfirst { margin: 0 0 var(--space-5); font: italic 400 22px/30px var(--serif); color: var(--ink-sub); }
.pull { margin: 0 0 var(--space-5); padding: var(--space-1) 0 var(--space-1) 22px; border-left: 2px solid var(--accent); max-width: var(--measure); }
.pull p { margin: 0 0 var(--space-2); font: 400 26px/35px var(--serif); }
.pull footer { font-size: 13px; color: var(--ink-muted); }
.bio { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: 17px; line-height: 28px; color: var(--ink-body); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.btn { display: inline-flex; align-items: center; height: 46px; padding: 0 var(--space-5); background: var(--inverse); color: var(--on-inverse); text-decoration: none; font: 500 14px/20px var(--sans); border: 0; cursor: pointer; }
.btn:hover { opacity: .9; }
.text-link { font-size: 14px; }

/* Body */
.body { display: flex; flex-wrap: wrap; gap: 56px; padding-top: 44px; }
.posts { flex: 999 1 560px; min-width: 0; }
.posts .intro { margin: var(--space-2) 0 var(--space-6); font-size: 14px; color: var(--ink-muted); }
.post { padding: var(--space-5) 0; border-top: 1px solid var(--rule); }
.post:last-of-type { border-bottom: 1px solid var(--rule); }
.post h3 { margin: 0 0 10px; font: 500 30px/35px var(--serif); }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.post p { margin: 0 0 var(--space-3); color: var(--ink-body); }
.out { font-size: 13px; color: var(--accent); }
.all { display: inline-block; margin-top: var(--space-5); font-size: 14px; }
aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.panel { padding: var(--space-5); border: 1px solid var(--rule); background: var(--surface-raised); }
.panel .topics { margin: var(--space-3) 0 var(--space-5); font: 400 19px/1.5 var(--serif); }
.panel p:last-child { margin-bottom: 0; }
.contact { padding: var(--space-5); background: var(--inverse); color: var(--on-inverse); }
.contact h2 { margin: 0 0 var(--space-2); font: 400 22px/28px var(--serif); }
.contact > p { margin: 0 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--on-inverse-muted); }
.contact label { display: block; margin: 0 0 6px; font: 500 13px/18px var(--sans); }
.contact input, .contact textarea { width: 100%; margin: 0 0 var(--space-3); padding: 10px 12px; min-height: 44px; border: 1px solid var(--on-inverse-muted); border-radius: 0; background: var(--inverse); color: var(--on-inverse); font: inherit; font-size: 15px; }
.contact textarea { min-height: 110px; resize: vertical; }
.contact .btn { background: var(--surface); color: var(--ink); }
.contact .note { margin: var(--space-3) 0 0; font-size: 12px; color: var(--on-inverse-muted); }
.hp { position: absolute; left: -9999px; }


.site-footer { margin-top: var(--space-9); border-top: 1px solid var(--rule-strong); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); font-size: 13px; color: var(--ink-muted); }

@media (max-width: 760px) {
  .site-header .wrap { padding-bottom: 0; }
  .nav-wrap { display: contents; }
  .toggle { order: 2; }
  .site-header nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--rule); }
  .site-header nav::-webkit-scrollbar { display: none; }
  .nav { flex-wrap: nowrap; white-space: nowrap; gap: var(--space-5); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-4); }
  .logo svg { height: 24px; }
  h1 { font-size: 44px; }
  .pull p { font-size: 22px; line-height: 30px; }
  .post h3 { font-size: 26px; line-height: 31px; }
  .portrait { width: 120px; height: 150px; font-size: 40px; }
}

/* Post page */
.post-page { max-width: 720px; }
.post-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--rule); }
.post-head h1 { font-size: 52px; line-height: 1.08; margin: var(--space-3) 0 var(--space-5); }
.byline { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.byline .avatar { width: 44px; height: 44px; background: var(--portrait); color: var(--portrait-ink); display: grid; place-items: center; font: 400 17px/1 var(--serif); flex: none; }
.byline a { color: var(--ink); font-weight: 500; text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.post-body { padding: var(--space-6) 0 var(--space-7); font: 400 20px/1.65 var(--serif); color: var(--ink-body); }
.post-body p { margin: 0 0 1.1em; }
.post-body ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.post-body li { margin-bottom: .5em; }
.post-body strong { color: var(--ink); font-weight: 500; }
.author { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--rule-strong); }
.author .portrait { width: 112px; height: 140px; font-size: 38px; }
.author-text { flex: 999 1 360px; min-width: 0; }
.author h2 { margin: var(--space-2) 0 var(--space-1); font: 500 30px/1.15 var(--serif); }
.author .standfirst { font-size: 18px; line-height: 26px; margin-bottom: var(--space-3); }
.author .bio { font-size: 16px; line-height: 26px; margin-bottom: var(--space-4); }
.post-page .contact { margin-top: var(--space-2); padding: var(--space-6); }
.post-page .contact form { max-width: 520px; }
@media (max-width: 640px) {
  .post-head h1 { font-size: 36px; }
  .post-body { font-size: 18px; }
  .post-page .contact { padding: var(--space-5); }
}

/* Home */
.masthead { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--rule); }
.masthead h1 { max-width: 19ch; margin: var(--space-3) 0 var(--space-4); font-size: 72px; line-height: 1.02; }
.masthead .standfirst { max-width: 54ch; }
.search { display: flex; max-width: 560px; margin-top: var(--space-6); border: 1px solid var(--ink); background: var(--surface-raised); }
.search input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink); font: 400 16px var(--sans); }
.search input::placeholder { color: var(--ink-muted); }
.search .btn { height: 52px; flex: none; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.search input:focus-visible { outline: none; }
.lead { padding: var(--space-7) 0; border-bottom: 1px solid var(--rule-strong); }
.lead > * { max-width: 820px; }
.lead h2 { margin: var(--space-3) 0 var(--space-5); font: 500 48px/1.08 var(--serif); letter-spacing: -.015em; }
.lead h2 a, .post h3 a { text-decoration: none; }
.lead h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.lead .sum { max-width: var(--measure); margin: 0 0 var(--space-4); font-size: 17px; line-height: 28px; color: var(--ink-body); }
.by { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: 14px; color: var(--ink-muted); }
.by a { color: var(--ink); font-weight: 500; text-decoration: none; }
.by a:hover, .by-sm a:hover, .meta a:hover { text-decoration: underline; }
.avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--portrait); color: var(--portrait-ink); font: 400 17px/1 var(--serif); }
.kicker a, .meta a { text-decoration: none; }
.by-sm { margin: 0; font-size: 14px; color: var(--ink-muted); }
.by-sm a { color: var(--ink); text-decoration: none; }
.fields { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.fields li { border-top: 1px solid var(--rule); }
.fields li:last-child { border-bottom: 1px solid var(--rule); }
.fields a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font: 400 20px/1.3 var(--serif); text-decoration: none; }
.fields a::after { content: "→"; font: 400 14px var(--sans); color: var(--ink-muted); }
.fields a:hover { color: var(--accent); }
.about p { margin: var(--space-3) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-body); }
.home-body aside { position: static; }
@media (max-width: 640px) {
  .masthead { padding: var(--space-7) 0 var(--space-6); }
  .masthead h1 { font-size: 44px; }
  .lead h2 { font-size: 34px; }
}

/* Added for the generated site (not in the mockups): photos, the LinkedIn link, newer/older links, list pages. */
img.avatar { object-fit: cover; padding: 0; }
.portrait img { display: block; }
.post-body .origin { margin: var(--space-6) 0 0; font: 400 14px/20px var(--sans); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding: 0 0 var(--space-6); }
.pager a { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; font: 400 19px/1.35 var(--serif); }
.pager a:last-child:not(:first-child) { text-align: right; }
.pager a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pager .meta { margin: 0; }
.list-head { padding: var(--space-7) 0 var(--space-6); border-bottom: 1px solid var(--rule); }
.list-head h1 { margin: var(--space-3) 0 var(--space-4); }
.list-head .standfirst { max-width: 54ch; }
.group { padding-top: var(--space-6); }
.group > .label a { text-decoration: none; }
.expert-row { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.expert-row .avatar { width: 64px; height: 80px; font-size: 22px; }
.expert-row h3 { margin: 0 0 var(--space-1); font: 500 30px/35px var(--serif); }
.expert-row h3 a { text-decoration: none; }
.expert-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.expert-row .sub { margin: 0 0 var(--space-2); font: italic 400 19px/26px var(--serif); color: var(--ink-sub); }
.list-posts { padding-top: var(--space-6); max-width: 760px; }
@media (max-width: 640px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager a:last-child:not(:first-child) { text-align: left; } }

/* Round author photo in bylines; one-line summary under post headlines; footer legal links; legal pages. */
.byline .avatar, .by .avatar { border-radius: 50%; }
.tldr { max-width: var(--measure); margin: 0 0 var(--space-5); font: 400 19px/28px var(--sans); color: var(--ink-body); }
.tldr .label { display: block; margin-bottom: var(--space-1); color: var(--accent); }
.legal-links { display: flex; gap: var(--space-4); }
.legal-links a { text-decoration: none; } .legal-links a:hover { text-decoration: underline; }
.legal { max-width: var(--measure); padding: var(--space-7) 0 0; }
.legal h1 { margin: var(--space-3) 0 var(--space-2); font: 500 52px/1.08 var(--serif); letter-spacing: -.02em; }
.legal h2 { margin: var(--space-6) 0 var(--space-2); font: 500 24px/30px var(--serif); }
.legal p, .legal li { color: var(--ink-body); }
.legal ul { padding-left: 1.2em; } .legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--ink); }
.legal code { font-size: .9em; }
@media (max-width: 640px) { .legal h1 { font-size: 38px; } }

/* Citation and topics on post pages; topic links; cookie banner (only when analytics is on). */
.post-body .cites { margin: var(--space-6) 0 0; font: 400 15px/24px var(--sans); color: var(--ink-muted); }
.post-body .cites .label, .post-body .topic-tags .label { margin-right: var(--space-2); color: var(--ink); }
.post-body .cites a { color: var(--ink); }
.post-body .cites cite { font-style: normal; }
.post-body .origin { margin-top: var(--space-3); }
.post-body .topic-tags { margin: var(--space-5) 0 0; font: 400 15px/24px var(--sans); color: var(--ink-muted); }
.post-body .topic-tags a { color: var(--ink); }
.panel .topics a { text-decoration: none; } .panel .topics a:hover { text-decoration: underline; }
.topic-list { columns: 2 260px; column-gap: var(--space-7); padding: var(--space-6) 0 0; margin: 0; list-style: none; }
.topic-list li { break-inside: avoid; border-top: 1px solid var(--rule); }
.topic-list a { display: flex; justify-content: space-between; min-height: 48px; align-items: center; font: 400 20px/1.3 var(--serif); text-decoration: none; }
.topic-list a span { font: 400 13px var(--sans); color: var(--ink-muted); }
.topic-list a:hover { color: var(--accent); }
.cc-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cc-link:hover { text-decoration: underline; }
.cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin: 0 auto; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--ink); padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); font: 400 15px/1.5 var(--sans); }
.cc-banner p { margin: 0; flex: 1 1 280px; }
.cc-row { display: flex; gap: var(--space-3); }
.cc-no { height: 46px; padding: 0 var(--space-5); background: transparent; color: var(--ink); border: 1px solid var(--rule); font: 500 14px/20px var(--sans); cursor: pointer; }
.about-steps { padding-left: 1.2em; }

/* Turnstile bot check on the contact form */
.contact .cf-turnstile { margin: 0 0 var(--space-3); min-height: 65px; }