@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Source+Sans+3:wght@500;600;700&display=swap');
:root { --ink:#251c35; --paper:#fbf7f2; --line:#e7dce8; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 88% 8%, #f0d9ed, transparent 27rem),var(--paper); font-family:"Noto Serif SC",serif; } header,main { width:min(1180px,calc(100% - 48px)); margin:auto; } header { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:#785b80; font:600 .75rem "Source Sans 3",sans-serif; letter-spacing:.15em; } header a { color:inherit; text-decoration:none; letter-spacing:.04em; }.intro { padding:clamp(4rem,9vw,7rem) 0 3rem; }.eyebrow { margin:0 0 .9rem; color:#9a568e; font:600 .75rem "Source Sans 3",sans-serif; letter-spacing:.15em; }.intro h1 { margin:0; font-size:clamp(3rem,7vw,5.6rem); line-height:1; font-weight:600; }.intro p:last-child { color:#695f6c; line-height:1.8; }.grid { padding-bottom:5rem; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }.character-card { position:relative; height:360px; overflow:hidden; color:#fff; border-radius:9px; box-shadow:0 10px 22px rgba(58,36,63,.13); text-decoration:none; }.character-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }.character-card:hover img { transform:scale(1.06); }.sporeth-card { box-shadow:0 13px 28px rgba(26,97,151,.24); }.sporeth-card img { object-position:center top; }.shade { position:absolute; inset:0; background:linear-gradient(transparent 37%,rgba(21,12,28,.9)); }.name,.action,.badge { position:absolute; left:1rem; right:1rem; }.name { bottom:1.8rem; font-weight:600; font-size:1.16rem; }.action { bottom:.75rem; color:#eaddeb; font:.77rem "Source Sans 3",sans-serif; opacity:0; transform:translateY(5px); transition:.25s; }.character-card:hover .action { opacity:1; transform:none; }.badge { top:1rem; color:#eafcff; font:700 .64rem "Source Sans 3",sans-serif; letter-spacing:.12em; text-shadow:0 1px 8px #163b6d; } @media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr);}.character-card{height:330px;}} @media(max-width:600px){header,main{width:min(100% - 32px,1180px);}.grid{grid-template-columns:repeat(2,1fr);gap:.7rem;}.character-card{height:275px;}.grid .character-card:last-child{grid-column:span 2;}.intro{padding:4rem 0 2.8rem;}}