:root {
  --recognition-bg: #10100f;
  --recognition-white: #fffdfa;
  --recognition-muted: rgba(255, 253, 250, .54);
  --recognition-line: rgba(255, 253, 250, .17);
  --recognition-orange: #ff6a1f;
  --recognition-mono: "Times New Roman", "Microsoft YaHei", "Noto Sans CJK SC", serif;
  --recognition-sans: "Times New Roman", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--recognition-bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; overflow-y: auto; background: radial-gradient(circle at 50% 30%, rgba(255, 106, 31, .08), transparent 38%), var(--recognition-bg); color: var(--recognition-white); font-family: var(--recognition-sans); }
a { color: inherit; text-decoration: none; }

.recognitions-header { position: fixed; z-index: 4; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: min(100%, 1440px); margin: 0 auto; padding: 1.3rem clamp(1.2rem, 3vw, 3rem); }
.recognitions-brand { font-size: clamp(1.45rem, 2.2vw, 2.2rem); font-weight: 700; letter-spacing: -.1em; }
.recognitions-brand sup { margin-left: .15rem; font-family: var(--recognition-mono); font-size: .46em; letter-spacing: 0; vertical-align: top; }
.recognitions-nav { display: flex; gap: clamp(1.2rem, 2.7vw, 3rem); color: var(--recognition-white); font-size: .78rem; }
.recognitions-nav a { opacity: .86; transition: color .25s ease, opacity .25s ease; }
.recognitions-nav a:hover { color: var(--recognition-orange); opacity: 1; }
.recognitions-nav a.is-active { color: var(--recognition-orange); opacity: 1; }

.recognitions-main { position: relative; width: min(100%, 1440px); min-height: 108vh; margin: 0 auto; padding: clamp(7rem, 11vw, 9rem) clamp(1.2rem, 4vw, 3.5rem) 2rem; }
.recognitions-kicker { display: flex; align-items: center; gap: .7rem; color: var(--recognition-muted); font-family: var(--recognition-mono); font-size: .65rem; letter-spacing: .12em; }
.recognitions-kicker span { display: block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--recognition-orange); box-shadow: 0 0 12px var(--recognition-orange); }
.recognitions-main h1 { margin: 0 0 1.8rem; font-size: clamp(4rem, 9vw, 9rem); font-weight: 300; line-height: .8; letter-spacing: -.1em; }
.recognitions-description { max-width: 46rem; margin: 0; color: var(--recognition-muted); font-family: var(--recognition-mono); font-size: clamp(.72rem, 1.1vw, .95rem); line-height: 1.7; }
.recognitions-window { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 0 0 1.5rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.recognitions-track { display: flex; width: max-content; gap: clamp(1rem, 2vw, 2rem); padding-left: 4vw; animation: recognition-loop 38s linear infinite; }
.recognitions-window:hover .recognitions-track { animation-play-state: paused; }
.recognition-card { position: relative; flex: 0 0 clamp(14rem, 18vw, 20rem); aspect-ratio: .78; overflow: hidden; border: 1px solid rgba(255, 253, 250, .32); border-radius: 1rem 1rem .45rem .45rem; background: var(--recognition-white); box-shadow: 0 -18px 42px rgba(0, 0, 0, .18); color: #111; }
.recognition-card--photo { background: #111; color: var(--recognition-white); }
.recognition-card--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recognition-card--photo::before { display: none; }
.recognition-card--photo::after { display: none; }
.recognition-card::before { position: absolute; inset: .65rem; border: 1px solid rgba(17, 17, 15, .12); border-radius: .55rem; content: ""; }
.recognition-card::after { position: absolute; right: 12%; bottom: 18%; left: 12%; height: 20%; border-radius: .25rem; background: rgba(17, 17, 15, .07); content: ""; }
.paper-mark { position: absolute; top: 16%; right: 14%; left: 14%; display: flex; flex-direction: column; gap: .8rem; color: rgba(17, 17, 15, .65); }
.paper-mark b { font-family: var(--recognition-mono); font-size: .7rem; font-weight: 400; letter-spacing: .08em; }
.paper-mark i { display: block; width: 45%; height: .3rem; background: rgba(17, 17, 15, .72); }
.paper-mark span { display: block; width: 80%; height: .3rem; background: rgba(17, 17, 15, .18); }
.recognition-card p { position: absolute; right: 14%; bottom: 8%; left: 14%; margin: 0; font-family: var(--recognition-mono); font-size: .6rem; line-height: 1.5; letter-spacing: .08em; }
.recognition-card--photo p { z-index: 1; right: 10%; bottom: 7%; left: 10%; color: var(--recognition-white); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.recognition-card--two { transform: translateY(1.5rem); }
.recognition-card--three { transform: translateY(-.8rem); }
.recognition-card--four { transform: translateY(1rem); }
.recognition-card--five { transform: translateY(-1.4rem); }
.recognition-card--six { transform: translateY(.5rem); }
.recognition-card--two .paper-mark i { width: 62%; }
.recognition-card--three .paper-mark i { width: 32%; }
.recognition-card--four .paper-mark i { width: 70%; }
.recognition-card--five .paper-mark i { width: 52%; }
.recognitions-footer { position: absolute; right: clamp(1.2rem, 4vw, 3.5rem); bottom: 1.1rem; left: clamp(1.2rem, 4vw, 3.5rem); display: flex; justify-content: space-between; color: var(--recognition-muted); font-family: var(--recognition-mono); font-size: .58rem; letter-spacing: .1em; pointer-events: none; }
@keyframes recognition-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 1rem)); } }

@media (max-width: 760px) {
  .recognitions-header { padding-top: 1rem; padding-bottom: 1rem; }
  .recognitions-nav { gap: .7rem; font-size: .65rem; }
  .recognitions-main { padding-top: 7rem; }
  .recognitions-main h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .recognitions-description { max-width: 22rem; }
  .recognition-card { flex-basis: 12rem; }
  .recognitions-footer { font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .recognitions-track { animation-play-state: paused; }
}