/* about page — reading layout, shares tokens with app.css */
.about-body { display: block; background: var(--bg); }
.about-body .site-header { position: sticky; top: 0; background: var(--bg); z-index: 10; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  line-height: 1.85;
  font-size: 15px;
}
.prose h2 { font-size: 19px; }
.prose p { margin-bottom: 14px; }
.prose a { color: var(--accent); }

.intro { margin-bottom: 40px; }
.intro .highlight {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 16px;
  color: var(--ink);
}

.award { padding: 26px 0; border-top: 1px solid var(--line); }
.award-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.award-head .dot { width: 10px; height: 10px; flex: none; align-self: center; }
.dot.michelin { background: var(--michelin); }
.dot.plates   { background: var(--plates); }
.dot.bowls    { background: var(--bowls); }
.dot.sweets   { background: var(--sweets); }
.dot.wanhua   { background: var(--wanhua); }
.dot.fifty    { background: #1A1A1A; }
.award-head .count {
  margin-left: auto; font-size: 12.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.award-body { margin: 0; }
.award dl { display: grid; grid-template-columns: 88px 1fr; gap: 6px 18px; }
.award dt {
  font-size: 12.5px; color: var(--ink-soft); padding-top: 5px;
  letter-spacing: .5px;
}
.award dd { margin: 0; }

.note-box {
  background: #F5EDE7;
  border-left: 3px solid var(--wanhua);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14.5px;
}

.limits { padding: 26px 0; border-top: 1px solid var(--line); }
.limits ul { padding-left: 20px; }
.limits li { margin-bottom: 10px; }

.credits { padding: 26px 0; border-top: 1px solid var(--line); }
.fineprint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; }
.back-cta {
  display: inline-block; margin-top: 10px; padding: 9px 18px;
  border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; font-size: 14px;
}
.back-cta:hover { background: var(--accent); color: #fff; }

@media (max-width: 600px) {
  .award dl { grid-template-columns: 1fr; gap: 2px; }
  .award dt { padding-top: 10px; }
  .award-head .count { margin-left: 0; width: 100%; }
}