/* ==========================================================================
   Official competition materials
   ========================================================================== */

.materials-page .writing-hero{
  background:
    radial-gradient(circle at 86% 18%,rgba(69,170,162,.27),transparent 25%),
    radial-gradient(circle at 17% 88%,rgba(210,161,94,.18),transparent 31%),
    linear-gradient(135deg,#225149 0%,#17332f 54%,#0b2320 100%);
}
.materials-page .writing-hero::after{content:"材";color:rgba(255,255,255,.032)}
.materials-page .writing-hero__eyebrow{color:#f0c47d}
.materials-page .writing-hero__actions .btn--ghost{border-color:rgba(251,245,234,.34)}
.materials-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:920px;margin-inline:auto}
@media(min-width:760px){.materials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.materials-page .writing-card__cover{aspect-ratio:1.43}
.materials-page .writing-card__ghost{font-size:236px;bottom:-74px}
.material-card--non-native{--accent:#347f78;--accent-2:#bd5d76}
.material-card--native{--accent:#b9763f;--accent-2:#735c91}
.material-card__category{
  position:absolute;left:21px;top:58px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;background:rgba(8,26,24,.18);border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.84);font-size:10.5px;font-weight:720;letter-spacing:.08em;text-transform:uppercase;
}
.material-card__category::before{content:"";width:6px;height:6px;border-radius:50%;background:#f1c677}
.materials-note{
  max-width:920px;margin:28px auto 0;padding:20px 22px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.72);display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;
}
.materials-note__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#e9f3f0;color:var(--teal-2);font-weight:780}
.materials-note h3{font-size:16px;font-weight:730;color:var(--ink)}
.materials-note p{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.65}
@media(max-width:640px){
  .materials-page .writing-card__cover{aspect-ratio:1.35}
  .materials-note{grid-template-columns:1fr;padding:18px}
}