/* magalia.wiki — PKU component kit. Three reusable components extracted from the
 * history.pku.edu.cn frame (see PKU-DESIGN-REFERENCE.md): a seal-badge section header,
 * a framed (double-border) card, and a navy footer slab. Requires css/tokens.css first.
 * Opt-in by class — does not restyle anything not marked. */

/* ── navy top bar ─────────────────────────────────────────────── */
.mag-bar{display:flex;align-items:center;gap:.6rem;background:var(--pku-navy-slab);color:#fff;
  padding:.7rem 1.1rem;font:600 1rem/1 var(--font-sans)}
.mag-bar a{color:#fff;text-decoration:none}
.mag-bar .sp{flex:1}

/* ── the seal badge (crimson round 籬 / 史) ────────────────────── */
.mag-seal{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--pku-crimson);color:#fff;
  font-weight:700;font-size:.82rem;flex:none}

/* ── section header: seal · title · pipe · MORE ───────────────── */
.mag-section{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 1rem}
.mag-section h2{margin:0;font:700 1.35rem/1.1 var(--font-serif);color:var(--ink)}
.mag-section .pipe{width:1px;height:1.2rem;background:var(--hairline)}
.mag-section .more{font:600 .8rem var(--font-sans);color:var(--muted);text-decoration:none;
  text-transform:uppercase;letter-spacing:.06em}
.mag-section .more:hover{color:var(--pku-crimson)}

/* ── framed card: the double-border certificate motif ─────────── */
.mag-card{position:relative;display:block;background:var(--paper);color:inherit;
  border:1px solid var(--hairline);border-radius:7px;padding:1.15rem 1.3rem;text-decoration:none;
  transition:transform .12s,box-shadow .12s}
.mag-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--hairline);
  border-radius:4px;pointer-events:none;opacity:.7}
.mag-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(31,58,102,.10)}
.mag-card h3{margin:0 0 .35rem;font:700 1.05rem var(--font-serif);color:var(--pku-navy)}
.mag-card p{margin:0;font-size:.88rem;color:var(--ink);line-height:1.5}
.mag-card .n{display:inline-block;margin-top:.5rem;font:600 .8rem var(--font-sans);color:var(--accent)}

/* ── crimson primary button ───────────────────────────────────── */
.mag-btn{display:inline-block;background:var(--pku-crimson);color:#fff;text-decoration:none;
  border:none;border-radius:.4rem;padding:.45rem .9rem;font:600 .9rem var(--font-sans);cursor:pointer}
.mag-btn.ghost{background:transparent;color:var(--pku-navy);border:1px solid var(--pku-navy)}

/* ── navy footer slab: contact lines · hairline rule · seal+wordmark ── */
.mag-footer{background:var(--pku-navy-slab);color:#fff;margin-top:2.5rem;padding:1.6rem 1.4rem}
.mag-footer .inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:1.4rem;justify-content:space-between}
.mag-footer a{color:#cbd6e6;text-decoration:none}
.mag-footer a:hover{color:#fff}
.mag-footer .rule{width:1px;align-self:stretch;background:rgba(255,255,255,.22)}
.mag-footer .sig{display:flex;align-items:center;gap:.5rem;font:700 1.05rem var(--font-cjk)}
.mag-footer .sig .mag-seal{background:#fff;color:var(--pku-crimson)}