/* Depth pages (/questions, /latex, /ai, /compare, /privacy, /terms): the home page's type on plain Ivory, read like a
   paper. Each page links base.css first, then this. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
header.top { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; }
.brand { display: flex; align-items: center; gap: .28em; font: 400 26px/1 var(--serif-display); color: var(--carbon); text-decoration: none; }
.brand .qed { display: block; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url(../assets/brand/qed-mask.png) center / contain no-repeat; mask: url(../assets/brand/qed-mask.png) center / contain no-repeat; }
header.top nav { display: flex; align-items: center; gap: 34px; font: 400 14.5px/1 var(--sans); }
header.top nav a { color: var(--carbon); text-decoration: none; }
header.top nav a[aria-current] { border-bottom: 1px solid var(--carbon); padding-bottom: 3px; }
header.top nav a.cta { padding: 12px 16px; border-radius: 7px; background: #1E2624; color: #F4EDE2; }

main { max-width: 860px; margin: 0 auto; padding: 110px 32px 0; }
.crumb { margin: 0 0 18px; font: 400 13px/1 var(--sans); color: var(--graphite); }
.crumb a { color: var(--graphite); text-decoration: none; }
h1 { margin: 0; font: 400 clamp(48px, 6vw, 84px)/1.02 var(--serif-display); letter-spacing: -.022em; }
.lede { margin: 22px 0 0; max-width: 34em; font: 400 clamp(19px, 1.7vw, 23px)/1.5 var(--serif); color: #3a3a3a; }
.updated { margin: 18px 0 0; }
.draft { margin: 28px 0 0; padding: 12px 14px; border-left: 2px solid var(--oxide); background: var(--wash); font: 400 14px/1.5 var(--sans); }

/* Prose sections: a question heading, a direct answer, then detail. */
.doc section { margin: 72px 0 0; }
.doc h2 { margin: 0 0 14px; font: 400 clamp(26px, 2.6vw, 32px)/1.2 var(--serif-display); letter-spacing: -.01em; }
.doc h3 { margin: 28px 0 8px; font: 400 20px/1.3 var(--serif); }
.doc section p, .doc section li { font: 400 17px/1.6 var(--serif); color: #2a2a2a; }
.doc section p { margin: 0; max-width: 40em; }
.doc section p + p, .doc section p + ul, .doc section ul + p, .doc section ol + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 1.2em; max-width: 40em; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--carbon); }
.doc code, .qs code { display: block; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-chip); background: var(--wash); font: 400 13px/1.55 var(--mono); white-space: pre-wrap; }
.doc p code, .doc li code { display: inline; margin: 0; padding: 1px 5px; }

/* Comparison tables. */
.table { margin: 18px 0 0; overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--sans); }
.table th, .table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table thead th { font-weight: 500; border-bottom-color: var(--rule-strong); }
.table tbody th { font-weight: 400; color: var(--graphite); width: 28%; }
.doc .sources li { font: 400 14px/1.5 var(--sans); color: var(--graphite); }

/* The ruled question list (/questions). */
.grp { margin: 72px 0 0; }
.grp .overline { margin: 0 0 14px; }
.qs { border-top: 1px solid var(--rule); }
.qs details { border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--oxide), var(--oxide)) center / 13px 1.4px no-repeat, linear-gradient(var(--oxide), var(--oxide)) center / 1.4px 13px no-repeat; transition: transform 220ms var(--ease); }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs h3 { margin: 0; font: 400 22px/1.3 var(--serif); }
.qs .a { padding: 0 48px 26px 0; max-width: 40em; font: 400 17px/1.6 var(--serif); color: #2a2a2a; }
.qs .a p { margin: 0; }
.qs .a p + p { margin-top: 10px; }
.qs .a a { color: var(--carbon); }

.end { margin: 110px 0 0; padding: 56px 0 0; border-top: 1px solid var(--rule); }
.end p { margin: 0; font: italic 400 clamp(30px, 3.6vw, 44px)/1.15 var(--serif-display); }
.end a.btn { display: inline-flex; gap: 12px; margin: 30px 0 0; padding: 16px 24px; border-radius: 7px; background: #1E2624; color: #F4EDE2; text-decoration: none; font: 500 15.5px/1 var(--sans); letter-spacing: .02em; }
footer { margin-top: 120px; border-top: 1px solid var(--rule); padding: 26px 0 96px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer .meta { display: flex; flex-wrap: wrap; row-gap: 8px; }
footer a { color: var(--graphite); text-decoration: none; margin-right: 18px; }

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  header.top nav a:not(.cta) { display: none; }
  main { padding: 72px 20px 0; }
  .grp, .doc section { margin-top: 56px; }
  .qs h3 { font-size: 19px; }
  .qs .a { padding-right: 0; font-size: 16px; }
  .doc section p, .doc section li { font-size: 16px; }
  .table table { font-size: 14px; }
}