/* ═══════════════════════════════════════════════════════════════════
   achievements.css — the record (medal gold)
   Seven disciplines, each lit in its own world's colour, so the reader
   always knows which part of the record they are in.
   ═════════════════════════════════════════════════════════════════ */

/* ── the instrument panel: seven readings over the flow field ─────── */
.sstats {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: clamp(8px, 2vh, 22px);
  border: 1px solid var(--line-2); border-radius: 0; overflow: hidden;
  background: color-mix(in srgb, var(--bg-raise) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: var(--shadow);
}
.sstat {
  position: relative;
  padding: clamp(18px, 1.8vw, 26px) clamp(14px, 1.3vw, 22px) clamp(16px, 1.6vw, 22px);
  /* hairlines to the left and above: the panel clips the outer ones, so the
     grid reads right at 7, 4 or 2 columns without per-count resets */
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
}
.sstat::before {
  content: ''; position: absolute; top: 0; left: clamp(14px, 1.3vw, 22px); width: 48px; height: 2px;
  background: var(--accent);
  transform: scaleX(0.55); transform-origin: left; transition: transform 0.6s var(--ease);
}
.sstat:hover::before { transform: none; }
.sstats .sstat-n { font-size: clamp(28px, 0.8rem + 1.7vw, 50px); }
.sstats .sstat-l { margin-top: 10px; }
@media (max-width: 1180px) {
  .sstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sstat:last-child { grid-column: span 2; }   /* 4 + 3: the seventh closes the row */
}
@media (max-width: 640px) { .sstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── a discipline: sticky name left, the record right ─────────────── */
.section.disc {
  padding-block: clamp(72px, 9vw, 150px);
  border-top: 1px solid var(--line);
  background: radial-gradient(46% 38% at 16% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
}
.disc::before {   /* a lit segment on the rule, in the discipline's own colour */
  content: ''; position: absolute; top: -1px; left: max(var(--mx), calc((100% - var(--maxw)) / 2));
  width: clamp(64px, 9vw, 140px); height: 1px;
  background: var(--accent);
}
@media (min-width: 901px) { .disc .chapter-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.disc-desc { max-width: 36ch; font: 500 var(--step--1)/1.65 var(--f-mono); letter-spacing: 0.02em; color: var(--text-3); }
.disc-body { display: grid; gap: clamp(14px, 1.4vw, 20px); align-content: start; }

/* ── the record cards ─────────────────────────────────────────────── */
.recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
@media (max-width: 700px) { .recs { grid-template-columns: minmax(0, 1fr); } }
.rec { gap: 12px; padding: clamp(20px, 2vw, 28px); border-radius: 0; }
.rec:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rec-k { display: flex; align-items: baseline; gap: 12px; font: 500 12.5px/1.5 var(--f-mono); letter-spacing: 0.02em; color: var(--text-3); }
.rec-n { flex: none; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); }
.rec-t { font: 700 clamp(19px, 0.95rem + 0.5vw, 24px)/1.2 var(--f-disp); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.rec-b { font-size: 15px; line-height: 1.62; }
.rec-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.rec-foot.chips { gap: 8px; padding-top: 16px; }
.rec-foot .arrow-link { font-size: 14px; }
html[lang="zh-CN"] .rec-t { letter-spacing: 0; line-height: 1.35; }

/* An odd count would strand the last card. Instead the first one — the
   headline result — takes the full row; the rest pair up. */
.recs > .rec:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.recs > .rec:first-child:nth-last-child(odd) .rec-t { font-size: clamp(22px, 1rem + 1.2vw, 34px); }
.recs:not(.roles) > .rec:first-child:nth-last-child(odd) {
  background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%), var(--bg-raise);
}
@media (min-width: 1000px) {
  .recs > .rec:first-child:nth-last-child(odd) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 12px clamp(24px, 3vw, 48px); align-content: start;
  }
  .recs > .rec:first-child:nth-last-child(odd) > .rec-b { grid-column: 2; grid-row: 1 / span 2; }
  .recs > .rec:first-child:nth-last-child(odd) > .rec-foot { grid-column: 2; }
}

/* roles & contributions: the same record, drawn in outline */
.rec-sub { margin-top: clamp(18px, 2.4vw, 34px); }
.roles > .rec { background: transparent; border-color: var(--line-2); }

/* ── footer: the old page's own links ─────────────────────────────── */
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }