:root {
    --paper: #FFFFFF;
    --paper-2: #F6F6F4;
    --ink: #14181F;
    --ink-2: #4A515C;
    --ink-3: #6B7280;
    --rule: #D6D9DE;
    --oxblood: #7A1F2B;
    --oxblood-hover: #5F1621;
    --highlight: #FFF0A0;

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;

    --measure: 68ch;
    --wrap: 1120px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.6;
    font-optical-sizing: auto;
  }
  a { color: var(--oxblood); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { color: var(--oxblood-hover); }
  :focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 2px; }

  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
  .sans { font-family: var(--sans); }

  /* Header */
  .masthead { border-bottom: 1px solid var(--ink); }
  .masthead .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 72px;
  }
  .wordmark {
    font-family: var(--serif); font-weight: 600; font-size: 28px;
    letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  }
  .wordmark span { color: var(--oxblood); }
  .nav { display: flex; align-items: center; gap: 28px; font-family: var(--sans); font-size: 15px; }
  .nav a { color: var(--ink); text-decoration: none; }
  .nav a:hover { color: var(--oxblood); text-decoration: underline; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 20px;
    background: var(--oxblood); color: #fff !important;
    font-family: var(--sans); font-weight: 600; font-size: 15px;
    border: 0; border-radius: 3px; cursor: pointer; text-decoration: none !important;
    transition: background-color 150ms ease;
  }
  .btn:hover { background: var(--oxblood-hover); }
  .nav .btn { min-height: 40px; padding: 0 16px; }

  /* Hero */
  .hero { padding: 56px 0 64px; border-bottom: 1px solid var(--rule); }
  .hero .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px; align-items: center;
  }
  .dateline {
    font-family: var(--sans); font-size: 14px; color: var(--ink-2);
    margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  }
  .dateline strong { color: var(--ink); font-weight: 600; }
  h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(38px, 4.6vw, 56px); line-height: 1.08;
    letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance;
  }
  .lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin: 0 0 32px; max-width: 34em; }

  .signup { max-width: 520px; }
  .signup label { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
  .signup-row { display: flex; gap: 8px; }
  .signup input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
    font: 400 16px var(--sans); color: var(--ink);
    border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
  }
  .signup input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; border-color: var(--oxblood); }
  .signup .btn { min-height: 48px; }
  .signup-note { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: 12px 0 0; }
  .signup-note a { color: var(--ink-2); }

  /* Email preview: the real brief, framed like an inbox */
  .preview { margin: 0; }
  .preview-frame {
    position: relative; height: 600px; overflow: hidden;
    border: 1px solid var(--rule); border-radius: 4px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20,24,31,.06), 0 8px 24px rgba(20,24,31,.06);
  }
  .preview { min-width: 0; }
  .preview-frame iframe {
    border: 0; display: block; height: 1600px;
    width: var(--w, 640px);
    margin: calc(-24px * var(--s, 0.7)) 0 0 calc(var(--x, -20px) * var(--s, 0.7));
    transform: scale(var(--s, 0.7)); transform-origin: 0 0;
    pointer-events: none;
  }
  .preview-frame::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
    background: linear-gradient(rgba(255,255,255,0), #FFFFFF);
  }
  .preview figcaption {
    display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
    font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 12px;
  }

  /* Section heads */
  section { padding: 64px 0; border-bottom: 1px solid var(--rule); }
  .section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin-bottom: 8px;
  }
  h2 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
  .section-head a { font-family: var(--sans); font-size: 15px; white-space: nowrap; }

  /* How it works */
  .step-list { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: s;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-list li { counter-increment: s; padding: 0 32px; border-left: 1px solid var(--rule); }
  .step-list li:first-child { padding-left: 0; border-left: 0; }
  .step-list li::before { content: counter(s); display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--oxblood); margin-bottom: 14px; }
  .step-list h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
  .step-list p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 30em; }

  /* Method */
  .method .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
  .method p { margin: 16px 0 0; color: var(--ink-2); max-width: 28em; }
  .criteria { margin: 0; padding: 0; list-style: none; counter-reset: c; }
  .criteria li {
    counter-increment: c; display: grid; grid-template-columns: 36px minmax(0, 1fr);
    padding: 16px 0; border-top: 1px solid var(--rule);
  }
  .criteria li:last-child { border-bottom: 1px solid var(--rule); }
  .criteria li::before { content: counter(c) "."; grid-row: span 2; font-family: var(--serif); color: var(--ink-3); font-size: 20px; }
  .criteria b { font-weight: 600; font-size: 19px; }
  .criteria span { grid-column: 2; color: var(--ink-2); font-size: 17px; }

  /* Specialties index */
  .index { columns: 4 200px; column-gap: 40px; margin: 24px 0 0; padding: 0; list-style: none; }
  .index li { break-inside: avoid; padding: 7px 0; font-size: 17px; }
  .index a { color: var(--ink); text-decoration: none; }
  .index a:hover { text-decoration: underline; }
  .index a:hover { color: var(--oxblood); }

  /* Founder note */
  .note .wrap { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px; max-width: 760px; align-items: center; }
  .note img { width: 96px; height: 108px; object-fit: cover; filter: grayscale(100%); }
  .note blockquote { margin: 0; font-size: 24px; line-height: 1.45; }
  .note cite { display: block; font-style: normal; font-family: var(--sans); font-size: 15px; color: var(--ink-2); margin-top: 16px; }

  /* Closing */
  .closing { border-bottom: 0; background: var(--paper-2); }
  .closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .closing h2 { font-size: 36px; }
  .closing p { color: var(--ink-2); margin: 12px 0 0; }

  footer { border-top: 1px solid var(--ink); padding: 32px 0 48px; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  footer a { color: var(--ink-2); }
  .disclaimer { max-width: 44em; margin: 0; }

  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Responsive */
  @media (max-width: 900px) {
    .hero .wrap, .closing .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .method .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .step-list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .step-list li { padding: 0; border-left: 0; }
  }
  @media (max-width: 640px) {
    body { font-size: 17px; }
    .wrap { padding: 0 16px; }
    .nav a:not(.btn):not(.signin) { display: none; }
    .nav { gap: 20px; }
    .hero { padding: 36px 0 48px; }
    .lede { font-size: 18px; }
    .signup-row { flex-direction: column; }
    section { padding: 48px 0; }
    h2 { font-size: 27px; }
    .note .wrap { grid-template-columns: 1fr; gap: 20px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Inner pages (method, about) ---------- */
.nav a[aria-current="page"] { color: var(--oxblood); text-decoration: underline; text-underline-offset: 6px; }

.page-head { padding: 64px 0 48px; border-bottom: 1px solid var(--ink); }
.page-head .kicker { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--oxblood); margin: 0 0 12px; }
.page-head h1 { max-width: 16em; }
.page-head .standfirst { font-size: 21px; line-height: 1.55; color: var(--ink-2); max-width: 36em; margin: 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
.two-col .lead { color: var(--ink-2); margin: 12px 0 0; max-width: 22em; }

/* Pipeline: a real sequence, so numbered and joined by a rule */
.pipeline { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.pipeline li { counter-increment: p; position: relative; padding: 0 0 36px 64px; }
.pipeline li::before {
  content: counter(p); position: absolute; left: 0; top: -4px;
  width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  font-family: var(--serif); font-size: 20px; font-variant-numeric: lining-nums;
}
.pipeline li::after { content: ""; position: absolute; left: 20px; top: 40px; bottom: 0; border-left: 1px solid var(--rule); }
.pipeline li:last-child { padding-bottom: 0; }
.pipeline li:last-child::after { display: none; }
.pipeline h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.pipeline p { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* Evidence table, set like a journal table */
.evidence { width: 100%; border-collapse: collapse; margin: 0; }
.evidence caption { text-align: left; font-family: var(--sans); font-size: 14px; color: var(--ink-2); padding-bottom: 12px; caption-side: top; }
.evidence caption b { color: var(--ink); }
.evidence thead th {
  text-align: left; font-family: var(--sans); font-size: 14px; font-weight: 600;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 16px 10px 0;
}
.evidence tbody th { text-align: left; vertical-align: top; font-weight: 500; font-size: 19px; padding: 16px 24px 16px 0; width: 30%; }
.evidence td { padding: 16px 0; color: var(--ink-2); vertical-align: top; }
.evidence tbody tr + tr th, .evidence tbody tr + tr td { border-top: 1px solid var(--rule); }
.evidence tbody tr:last-child th, .evidence tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.evidence ul { margin: 0; padding: 0; list-style: none; }
.evidence li { padding: 2px 0; }
.table-note { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: 12px 0 0; max-width: 46em; }

/* About */
.essay { font-size: 20px; line-height: 1.65; max-width: 34em; }
.essay p { margin: 0 0 1.1em; }
.byline-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; }
.byline-card img { width: 88px; height: 99px; object-fit: cover; filter: grayscale(100%); }
.byline-card b { display: block; font-size: 20px; font-weight: 500; }
.byline-card span { font-family: var(--sans); font-size: 14px; color: var(--ink-2); line-height: 1.45; display: block; margin-top: 4px; }

.principles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.principles div { padding: 20px 0; border-top: 1px solid var(--rule); }
.principles dt { font-weight: 500; font-size: 21px; margin: 0 0 6px; }
.principles dd { margin: 0; color: var(--ink-2); font-size: 17px; }

.contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 48px; }
.contact p { margin: 8px 0 0; color: var(--ink-2); max-width: 30em; }
.contact .mail { font-size: 24px; }

@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .page-head { padding: 40px 0 32px; }
  .page-head .standfirst { font-size: 18px; }
  .pipeline li { padding-left: 56px; }
  .evidence tbody th { width: auto; display: block; padding-bottom: 4px; }
  .evidence td { display: block; padding-top: 0; }
  .evidence tbody tr + tr td { border-top: 0; }
  .evidence thead { display: none; }
  .essay { font-size: 18px; }
  .principles { grid-template-columns: minmax(0, 1fr); }
}

/* Specialties page */
.sp-search { margin-top: 28px; max-width: 420px; }
.sp-search label { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sp-search input {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--sans); color: var(--ink);
  border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
}
.sp-search input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; border-color: var(--oxblood); }
.sp-section { padding-top: 24px; }
.sp-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.sp-group[hidden] { display: none; }
.sp-group h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0; line-height: 1.3; }
.sp-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
.sp-group li { font-size: 18px; }
.sp-group li[hidden] { display: none; }
.sp-empty, .sp-missing { font-family: var(--sans); font-size: 15px; color: var(--ink-2); margin: 24px 0 0; }

.topics-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.topic-example { margin: 0; border: 1px solid var(--ink); padding: 24px; }
.topic-example figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 4px; }
.topic-example figcaption b { font-weight: 500; font-size: 21px; }
.topic-example figcaption span { font-family: var(--sans); font-size: 13px; color: var(--ink-3); }
.topic-example h4 { font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 16px; color: var(--ink-2); }
.topic-list .more { color: var(--ink-3); font-style: italic; }

@media (max-width: 900px) {
  .sp-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .topics-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-group li { font-size: 16px; }
}

/* Suggest a specialty */
.suggest {
  margin-top: 40px; padding: 28px; background: var(--paper-2); border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start;
}
.suggest h2 { font-size: 26px; }
.suggest p { margin: 8px 0 0; color: var(--ink-2); max-width: 26em; }
.suggest label { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.suggest label.optional { margin-top: 16px; font-weight: 500; color: var(--ink-2); }
.suggest label span { color: var(--ink-3); }
.suggest input {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--sans); color: var(--ink);
  border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
}
.suggest .signup-row input { width: auto; flex: 1; min-width: 0; }
.suggest input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; border-color: var(--oxblood); }
.suggest .btn { min-height: 48px; white-space: nowrap; }
.suggest .suggest-done { font-family: var(--sans); font-size: 15px; color: var(--ink); margin-top: 12px; }
@media (max-width: 900px) { .suggest { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 640px) { .suggest { padding: 20px 16px; } }

/* ---------- Live-site additions ---------- */
.banner { background: #FBEFF0; border-bottom: 1px solid #E8C9CD; color: var(--oxblood); font-family: var(--sans); font-size: 15px; }
.banner .wrap { padding-top: 14px; padding-bottom: 14px; }
.preview-empty { padding: 48px 32px; font-family: var(--sans); font-size: 15px; color: var(--ink-2); }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  font-family: var(--serif); font-size: 22px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); color: var(--ink-3); font-size: 22px; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; color: var(--ink-2); max-width: var(--measure); }

/* Sample brief page */
.sample-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sample-email { background: #EFEFEC; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.sample-notes { position: sticky; top: 24px; }
.sample-notes h2 { font-size: 26px; margin-bottom: 8px; }
.sample-notes .criteria b { font-size: 18px; }
@media (max-width: 900px) {
  .sample-layout { grid-template-columns: minmax(0, 1fr); }
  .sample-notes { position: static; }
}
.preview-frame:has(.preview-empty) { height: auto; }
.preview-frame:has(.preview-empty)::after { display: none; }

/* ---------- Brief page (/brief/<id>) ---------- */
.bp-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--rule); }
.bp-tab {
  font: 500 15px var(--sans); color: var(--ink-2); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 14px 0 12px; cursor: pointer;
}
.bp-tab:hover { color: var(--ink); }
.bp-tab[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--oxblood); }
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding: 32px 0 80px; }
.bp-list { list-style: none; margin: 0; padding: 0; }
.bp-paper { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.bp-paper:first-child { padding-top: 0; }
.bp-paper.top { padding: 24px 24px 28px; margin-bottom: 8px; border: 1px solid var(--ink); border-top-width: 3px; }
.bp-kicker { font: 600 13px var(--sans); color: var(--oxblood); margin: 0 0 8px; }
.bp-design { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.04em; font-size: 16px; font-weight: 600; color: var(--ink-3); margin: 0 0 4px; }
.bp-paper h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.bp-paper.top h2 { font-size: 27px; }
.bp-paper.compact h2 { font-size: 19px; }
.bp-paper h2 a { color: var(--ink); text-decoration: none; }
.bp-paper h2 a:hover { text-decoration: underline; }
.bp-cite { font-size: 16px; line-height: 1.45; color: var(--ink-2); margin: 0 0 14px; }
.bp-fields { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; max-width: var(--measure); }
.bp-fields dt { font: 600 13px/1.9 var(--sans); color: var(--ink-2); }
.bp-fields dt.strong { color: var(--ink); }
.bp-fields dd { margin: 0; font-size: 17px; line-height: 1.55; }
.bp-fields mark { background: var(--highlight); color: inherit; padding: 1px 2px; }
.bp-note { font: 400 14px/1.5 var(--sans); color: var(--ink-2); margin: 0; }
.bp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 14px 0 0; font: 400 14px var(--sans); }
.bp-links a { color: var(--ink-2); }
.bp-links a.pubmed { color: var(--oxblood); }
.bp-links button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bp-links button:disabled { cursor: default; text-decoration: none; }
.bp-summ { margin-top: 14px; }
.bp-empty { font-family: var(--sans); color: var(--ink-2); }

.bp-side { position: sticky; top: 24px; display: grid; gap: 20px; }
.bp-box { border-top: 2px solid var(--ink); padding-top: 14px; }
.bp-box h2 { font: 600 14px var(--sans); margin: 0 0 10px; }
.bp-stats { margin: 0 0 16px; }
.bp-stats div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.bp-stats dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.bp-box .btn { width: 100%; }
.bp-box .btn.ghost { background: #fff; color: var(--ink) !important; border: 1px solid #9AA0A9; margin-top: 8px; }
.bp-box .btn.ghost:hover { border-color: var(--ink); }
.bp-box ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 15px; }
.bp-box li { padding: 5px 0; }
.bp-box li a { color: var(--ink); }

@media (max-width: 900px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bp-side { position: static; }
}
@media (max-width: 640px) {
  .bp-paper.top { padding: 18px 16px 22px; }
  .bp-paper.top h2 { font-size: 23px; }
  .bp-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bp-fields dd { margin-bottom: 8px; }
}

/* ---------- Account pages (sign in, library) ---------- */
.btn.outline { background: #fff; color: var(--ink) !important; border: 1px solid #9AA0A9; }
.btn.outline:hover { background: #fff; border-color: var(--ink); }
.btn.block { width: 100%; min-height: 48px; }
.error-note { font-family: var(--sans); font-size: 15px; color: var(--oxblood); margin: 0; }

.auth { max-width: 440px; margin: 0 auto; padding: 72px 0 96px; }
.auth .kicker { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--oxblood); margin: 0 0 12px; }
.auth h1 { font-size: clamp(34px, 4vw, 44px); margin: 0 0 12px; }
.auth .standfirst { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 0 0 28px; }
.auth form { display: grid; gap: 12px; }
.auth label { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.auth input[type=email], .auth input[type=text] {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--sans); color: var(--ink);
  border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
}
.auth input:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; border-color: var(--oxblood); }
.auth input.code { min-height: 60px; font-size: 28px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.auth .divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.auth .divider::before, .auth .divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.auth .google { gap: 10px; }
.auth .aside { font-family: var(--sans); font-size: 15px; color: var(--ink-2); margin: 24px 0 0; }
.auth .aside a { color: var(--ink); }

.lib { padding-bottom: 80px; }   /* bottom only: keep .wrap's side gutters */
.lib-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }
.lib-head .standfirst { margin-top: 8px; }
.lib-export { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.lib-export .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.lib-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.lib-item { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.lib-item h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.lib-item h2 a { color: var(--ink); text-decoration: none; }
.lib-item h2 a:hover { text-decoration: underline; }
.lib-saved { font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.lib-summary { font-size: 17px; line-height: 1.55; margin: 0 0 4px; max-width: var(--measure); }
.lib-note { margin: 12px 0 0; padding: 10px 14px; background: var(--paper-2); border-left: 2px solid var(--rule); font-style: italic; color: var(--ink-2); max-width: var(--measure); }
.lib-note-form { display: grid; gap: 8px; margin-top: 12px; max-width: var(--measure); }
.lib-note-form[hidden] { display: none; }
.lib-note-form textarea { width: 100%; padding: 10px 12px; font: 400 16px var(--sans); color: var(--ink); border: 1px solid #9AA0A9; border-radius: 3px; resize: vertical; }
.lib-note-form textarea:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 0; border-color: var(--oxblood); }
.lib-note-form .row { display: flex; gap: 8px; }
.lib-note-form .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.lib-links form { display: contents; }
.lib-links button.danger:hover { color: var(--oxblood); }
.lib-empty { max-width: 34em; padding: 24px 0 0; }
.lib-empty h2 { font-size: 26px; margin: 0 0 8px; }
.lib-empty p { color: var(--ink-2); margin: 0; }
.account-email { font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
@media (max-width: 640px) {
  .auth { padding: 40px 0 64px; }
  .account-email { display: none; }
}
.nav a { white-space: nowrap; }
.auth input[type=password] {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--sans); color: var(--ink);
  border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
}
.auth .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.auth .label-row a { font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.auth .field-hint { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: -4px 0 0; }
.auth .alt-signin { display: grid; gap: 10px; }

/* ---------- Public specialty pages and homepage demo ---------- */
.bp-paper .bp-title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.bp-paper .bp-title a { color: var(--ink); text-decoration: none; }
.bp-paper .bp-title a:hover { text-decoration: underline; }
.page-head .kicker a { color: inherit; }
.sp-papers .bp-layout { padding-top: 8px; }
.sp-subgroup { font: 600 13px var(--sans); color: var(--ink-2); margin: 16px 0 6px; }
.bp-box .topic-list { display: flex; gap: 2px 14px; font-size: 15px; margin-bottom: 4px; }
.bp-box .topic-list li { padding: 2px 0; }
.bp-box .topic-list + .btn, .bp-box .btn:last-child { margin-top: 20px; }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.demo label { display: block; font: 600 14px var(--sans); margin: 20px 0 8px; }
.demo select {
  width: 100%; min-height: 48px; padding: 0 12px; font: 400 16px var(--sans); color: var(--ink);
  border: 1px solid #9AA0A9; border-radius: 3px; background: #fff;
}
.demo select:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.demo-out { min-height: 240px; }
.demo-out[aria-busy="true"] { opacity: 0.5; transition: opacity 150ms ease; }
.demo-more { font-family: var(--sans); font-size: 15px; margin: 20px 0 0; }
.demo-more a { color: var(--oxblood); }
@media (max-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.demo .lead { color: var(--ink-2); margin: 12px 0 0; max-width: 22em; }