/* The fade pages (site/fade/): "How long does it last?". Loaded after
   site.css, whose tokens (ink, gold, cream ground, Bodoni, SF, Plex Mono),
   header, footer, buttons and .chart styles it reuses. Hand-written. */

.fp { padding-bottom: 40px; max-width: 820px; }
.fp h1 { font-size: clamp(34px, 7vw, 60px); line-height: 1.05; margin: 8px 0 12px; }
.fp section { margin-top: 44px; }
.fp section > p { margin: 0; max-width: 40em; }
.fp .section-mark { margin-bottom: 16px; font-weight: 400; }
.crumbs { font: 400 11px/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin-top: 8px; }
.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.answer { font-family: var(--display); font-size: clamp(30px, 6vw, 46px); line-height: 1.15; color: var(--gold-hi); margin: 26px 0 0; }
@media (prefers-color-scheme: light) { .answer { color: var(--gold); } }
.modelled { font: 400 10px/1 var(--mono); letter-spacing: 0.14em; color: var(--label); vertical-align: middle; margin-left: 6px; }

.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.moments li { background: var(--lift); padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.mo-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.moments time { font-family: var(--display); font-size: 24px; color: var(--ink); line-height: 1.1; }
.mo-d { font-size: 13px; line-height: 1.4; color: var(--label); }
.moments li:last-child .mo-k { color: var(--alert); }
@media (max-width: 640px) {
  .moments { grid-template-columns: 1fr; }
  .moments li { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 14px; }
  .mo-k { min-width: 7.5em; }
  .moments time { font-size: 20px; min-width: 4.6em; }
}

.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.legend span::before { content: ""; display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 8px; }
.k-others::before { border-top: 3px solid var(--gold-hi); }
.k-you::before { border-top: 2px dashed var(--body); }

.tiers { margin: 0; display: grid; gap: 10px; }
.tiers div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; }
.tiers dt { font: 400 11px/1.9 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); }
.tiers dd { margin: 0; color: var(--ink); }

.fl, #by-house > p { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; }
.fl a, #by-house > p a { display: flex; flex-direction: column; padding: 9px 0; min-height: 44px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.fl a:hover { color: var(--gold-hi); }
.fl i { font: normal 400 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }
.fl b { font: 400 13px/1.5 var(--mono); color: var(--gold); }
.sim { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.cta { margin-top: 56px; padding: 30px 26px; background: var(--lift); border: 1px solid var(--rule); border-radius: 18px; }
.cta h2 { font-size: clamp(28px, 5vw, 38px); margin-bottom: 8px; }
.cta p { margin: 0 0 20px; }
.fine { font: 400 11px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--label); margin: 28px 0 0; }

.hub-tools { margin-top: 30px; display: grid; gap: 10px; }
.hub-tools input { font: 17px/1.4 var(--sans); color: var(--ink); background: var(--lift); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; max-width: 520px; }
.hub-tools input:focus { border-color: var(--gold); outline: none; }
.hub-tools #count { margin: 0; }
.views { display: flex; gap: 8px; }
.views button { font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--body); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0 16px; min-height: 40px; cursor: pointer; }
.views button[aria-pressed="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.jump { display: flex; flex-wrap: wrap; gap: 4px 2px; margin-top: 24px; }
.jump a { font: 400 12px/1 var(--mono); color: var(--body); text-decoration: none; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.jump a:hover { color: var(--gold-hi); }
#az section, #by-house section, #by-house > h3 { margin-top: 28px; }
#az h3, #by-house h3 { font-size: 22px; margin-bottom: 6px; color: var(--gold-hi); }
@media (prefers-color-scheme: light) { #az h3, #by-house h3 { color: var(--gold); } }