/* Porschephiles and PorscheFans archive pages. The Porsche section header and porsche.css come first. */
:root {
  --pf-ink: #17202b;
  --pf-muted: #59636f;
  --pf-wash: #f4f6f3;
  --pf-rule: #dfe3e0;
  --pf-blue: #24445f;
  --pf-rust: #b5532f;
  --pf-rust-dark: #883a22;
}
.pf, .pf * { box-sizing: border-box; }
.pf { color: var(--pf-ink); line-height: 1.5; }
.pf a { color: var(--pf-blue); }
.pf a:hover { color: var(--pf-rust); }
.pf h1 { font-weight: 500; font-size: 1.75rem; line-height: 1.2; margin: .3rem 0 .6rem; overflow-wrap: anywhere; }
.pf h2 { font-weight: 500; font-size: 1.3rem; margin: 1.6rem 0 .6rem; }
.pf h3 { font-weight: 500; font-size: 1.1rem; margin: 0 0 .4rem; }
.pf-crumbs { font-size: .85rem; color: var(--pf-muted); }
.pf-explainer { margin: 0 0 1.25rem; padding: .75rem 1rem; background: var(--pf-wash); border-radius: 6px; line-height: 1.5; }
.pf-meta { color: var(--pf-muted); margin: 0 0 1rem; }
.pf-headers {
  display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem;
  margin: 0 0 1rem; padding: .75rem 1rem; background: var(--pf-wash); border-radius: 6px;
  font-size: .9rem;
}
.pf-headers dt { color: var(--pf-muted); }
.pf-headers dd { margin: 0; overflow-wrap: anywhere; }
.pf-body {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: .9rem/1.45 ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}
.pf-pager {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 1.5rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--pf-rule); font-size: .95rem;
}
.pf-more { font-size: .95rem; }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { padding: .3rem 0; border-bottom: 1px solid var(--pf-wash); overflow-wrap: anywhere; }
.pf-list time { display: inline-block; min-width: 3.6rem; color: var(--pf-muted); font-variant-numeric: tabular-nums; }
.pf-authors li time, .pf-list li time { margin-right: .4rem; }
.pf-who { color: var(--pf-muted); font-size: .9rem; }
.pf-who::before { content: "\00b7\00a0"; }
.pf-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.pf-year { background: var(--pf-wash); border-radius: 6px; padding: .75rem 1rem; }
.pf-year ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem .6rem; }
.pf-year li { white-space: nowrap; }
.pf-year li span { color: var(--pf-muted); font-size: .8rem; }
.pf-card { margin-bottom: 1.5rem; }
.pf-hit-meta { color: var(--pf-muted); }
.pf-filter { display: block; margin: 0 0 1rem; color: var(--pf-muted); }
.pf-filter input {
  font: inherit; padding: .4rem .6rem; border: 1px solid var(--pf-rule); border-radius: 6px;
  width: min(22rem, 100%); margin-left: .4rem;
}
.pf-intro { border-top: 1px solid var(--pf-rule); margin-top: 1.5rem; padding-top: .5rem; }
@media (max-width: 640px) {
  .pf h1 { font-size: 1.4rem; }
  .pf-headers { grid-template-columns: 1fr; }
  .pf-headers dt { margin-top: .3rem; }
  .pf-body { font-size: .82rem; }
  .pf-month time { min-width: 3.2rem; }
}
.pf-search { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.pf-search input, .pf-search select, .pf-button {
  font: inherit; padding: .55rem .75rem; border: 1px solid var(--pf-rule); border-radius: 6px; background: #fff; color: var(--pf-ink);
}
.pf-search input { flex: 1 1 16rem; min-width: 0; }
.pf-button { cursor: pointer; margin: .75rem 0 1rem; }
.pf-button:hover { border-color: var(--pf-blue); }
.pf-hits:empty { display: none; }
.pf-hits { margin-bottom: 1rem; }
.pf-excerpt { color: var(--pf-muted); font-size: .9rem; margin-top: .15rem; }
.pf-excerpt mark { background: #fbe7c6; color: inherit; }
.pf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }