:root {
  --pink: #f62a7d;
  --yellow: #ffef39;
  --sky: #28b9ef;
  --navy: #28375e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: radial-gradient(circle at 10px 10px, #c9f2d2 2px, transparent 3px) 0 0 / 24px 24px, #fffdf1;
}

.site-header {
  min-height: 73px;
  padding: 10px clamp(17px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  border-bottom: 4px solid var(--pink);
  box-shadow: 0 3px 0 var(--yellow);
}

.channel-logo { display: block; overflow: hidden; }
.channel-logo img { display: block; max-width: none; object-fit: cover; object-position: center 48%; }
.channel-logo--header { width: 215px; height: 44px; flex: 0 0 215px; }
.channel-logo--header img { width: 215px; height: 44px; }

.site-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.site-header nav a { padding: 4px 10px; border-radius: 99px; color: #1682ae; font-size: .79rem; font-weight: 800; text-decoration: none; }
.site-header nav a[aria-current="page"], .site-header nav a:hover { color: #fff; background: var(--sky); }

.hero {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 45px 24px;
  background: linear-gradient(90deg, rgba(0,166,232,.72), rgba(0,166,232,.12)), url("../poketv_img/eyecatch-running-jersey.jpg") center 35% / cover;
}
.hero__copy { padding: 25px 36px; text-align: center; color: #fff; background: rgba(246,42,125,.9); border-radius: 28px; box-shadow: 7px 7px 0 rgba(255,239,57,.95); }
.hero__copy p { margin: 0; font-family: "Trebuchet MS", sans-serif; font-weight: 900; letter-spacing: .18em; }
.hero h1 { margin: 3px 0 7px; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: .11em; }
.hero__copy span { font-size: .9rem; font-weight: 700; }

.intro { padding: 55px 24px 20px; text-align: center; background: #fff; }
.intro p { margin: 0; color: var(--pink); font-family: "Trebuchet MS", sans-serif; font-weight: 900; letter-spacing: .18em; }
.intro h2 { margin: 2px 0 6px; color: var(--pink); font-size: 2rem; letter-spacing: .12em; }
.intro span { color: #62708c; font-size: .9rem; font-weight: 600; }

.character-grid { max-width: 1080px; margin: 0 auto; padding: 44px 24px 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.character-card { position: relative; overflow: hidden; background: #fff; border: 3px solid var(--sky); border-radius: 24px; box-shadow: 7px 7px 0 rgba(40,185,239,.2); transition: transform .18s ease; }
.character-card:hover { transform: translate(-2px,-2px); }
.character-card__link { position: absolute; inset: 0; z-index: 1; border-radius: 21px; }
.character-card__link:focus-visible { outline: 4px solid var(--yellow); outline-offset: -7px; }
.character-card:nth-child(even) { border-color: var(--pink); box-shadow: 7px 7px 0 rgba(246,42,125,.18); }
.character-card__visual { height: 178px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg,#4ec9f1,#2273b4); }
.character-card:nth-child(even) .character-card__visual { background: linear-gradient(135deg,#ff77b0,#ef327c); }
.character-card--pokemu .character-card__visual { background: #fff2a3; }
.character-card__visual img { height: 172px; max-width: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(2px 4px 0 rgba(37,82,131,.12)); }
.character-card--pokemu .character-card__visual img { height: 164px; }
.character-card--pokemu { border-color: #df2546; box-shadow: 7px 7px 0 rgba(223,37,70,.2); }
.character-card--pokemu .character-card__visual { background: linear-gradient(135deg, #ff8d8d, #df2546); }
.character-card--pokemu h2, .character-card--pokemu .role b { color: #c51f3d; }

.character-card--yune { border-color: #f28b19; box-shadow: 7px 7px 0 rgba(242,139,25,.22); }
.character-card--yune .character-card__visual { background: linear-gradient(135deg, #ffc45b, #f28b19); }
.character-card--yune h2, .character-card--yune .role b { color: #d66e00; }

.character-card--chinatsu { border-color: #18ad88; box-shadow: 7px 7px 0 rgba(24,173,136,.22); }
.character-card--chinatsu .character-card__visual { background: linear-gradient(135deg, #65e1bb, #18ad88); }
.character-card--chinatsu h2, .character-card--chinatsu .role b { color: #078d6d; }

.character-card--masha { border-color: #268bd2; box-shadow: 7px 7px 0 rgba(38,139,210,.22); }
.character-card--masha .character-card__visual { background: linear-gradient(135deg, #71c7f5, #268bd2); }
.character-card--masha h2, .character-card--masha .role b { color: #1270b6; }

.character-card--sakura { border-color: #ee6da3; box-shadow: 7px 7px 0 rgba(238,109,163,.22); }
.character-card--sakura .character-card__visual { background: linear-gradient(135deg, #ffc0d9, #ee6da3); }
.character-card--sakura h2 { color: #d64984; }

.character-card--hina { border-color: #e8b817; box-shadow: 7px 7px 0 rgba(232,184,23,.23); }
.character-card--hina .character-card__visual { background: linear-gradient(135deg, #fff18a, #e8b817); }
.character-card--hina h2, .character-card--hina .role b { color: #b17a00; }
.character-card.character-card--pokemu { border-color: #df2546; box-shadow: 7px 7px 0 rgba(223,37,70,.2); }
.character-card.character-card--pokemu .character-card__visual { background: linear-gradient(135deg, #ff8d8d, #df2546); }
.character-card.character-card--pokemu h2, .character-card.character-card--pokemu .role b { color: #c51f3d; }
.character-card.character-card--yune { border-color: #f28b19; box-shadow: 7px 7px 0 rgba(242,139,25,.22); }
.character-card.character-card--yune .character-card__visual { background: linear-gradient(135deg, #ffc45b, #f28b19); }
.character-card.character-card--yune h2, .character-card.character-card--yune .role b { color: #d66e00; }
.character-card.character-card--chinatsu { border-color: #18ad88; box-shadow: 7px 7px 0 rgba(24,173,136,.22); }
.character-card.character-card--chinatsu .character-card__visual { background: linear-gradient(135deg, #65e1bb, #18ad88); }
.character-card.character-card--chinatsu h2, .character-card.character-card--chinatsu .role b { color: #078d6d; }
.character-card.character-card--masha { border-color: #268bd2; box-shadow: 7px 7px 0 rgba(38,139,210,.22); }
.character-card.character-card--masha .character-card__visual { background: linear-gradient(135deg, #71c7f5, #268bd2); }
.character-card.character-card--masha h2, .character-card.character-card--masha .role b { color: #1270b6; }
.character-card.character-card--sakura { border-color: #ee6da3; box-shadow: 7px 7px 0 rgba(238,109,163,.22); }
.character-card.character-card--sakura .character-card__visual { background: linear-gradient(135deg, #ffc0d9, #ee6da3); }
.character-card.character-card--sakura h2 { color: #d64984; }
.character-card.character-card--hina { border-color: #e8b817; box-shadow: 7px 7px 0 rgba(232,184,23,.23); }
.character-card.character-card--hina .character-card__visual { background: linear-gradient(135deg, #fff18a, #e8b817); }
.character-card.character-card--hina h2, .character-card.character-card--hina .role b { color: #b17a00; }
.character-card__content { padding: 19px 20px 22px; }
.character-card h2 { margin: 0; color: #245283; font-size: 1.35rem; letter-spacing: .08em; }
.character-card:nth-child(even) h2 { color: #db286d; }
.role { margin: 10px 0 0; color: #566784; font-size: .88rem; line-height: 1.7; }
.role b { color: #2590bf; font-size: .72rem; letter-spacing: .08em; }
.character-card:nth-child(even) .role b { color: #df3374; }

/* Individual character colours take priority over the former alternating-card palette. */
.character-card.character-card--pokemu { border-color: #df2546; box-shadow: 7px 7px 0 rgba(223,37,70,.2); }
.character-card.character-card--pokemu .character-card__visual { background: linear-gradient(135deg, #ff8d8d, #df2546); }
.character-card.character-card--pokemu h2, .character-card.character-card--pokemu .role b { color: #c51f3d; }
.character-card.character-card--yune { border-color: #f28b19; box-shadow: 7px 7px 0 rgba(242,139,25,.22); }
.character-card.character-card--yune .character-card__visual { background: linear-gradient(135deg, #ffc45b, #f28b19); }
.character-card.character-card--yune h2, .character-card.character-card--yune .role b { color: #d66e00; }
.character-card.character-card--chinatsu { border-color: #18ad88; box-shadow: 7px 7px 0 rgba(24,173,136,.22); }
.character-card.character-card--chinatsu .character-card__visual { background: linear-gradient(135deg, #65e1bb, #18ad88); }
.character-card.character-card--chinatsu h2, .character-card.character-card--chinatsu .role b { color: #078d6d; }
.character-card.character-card--masha { border-color: #268bd2; box-shadow: 7px 7px 0 rgba(38,139,210,.22); }
.character-card.character-card--masha .character-card__visual { background: linear-gradient(135deg, #71c7f5, #268bd2); }
.character-card.character-card--masha h2, .character-card.character-card--masha .role b { color: #1270b6; }
.character-card.character-card--sakura { border-color: #ee6da3; box-shadow: 7px 7px 0 rgba(238,109,163,.22); }
.character-card.character-card--sakura .character-card__visual { background: linear-gradient(135deg, #ffc0d9, #ee6da3); }
.character-card.character-card--sakura h2 { color: #d64984; }
.character-card.character-card--hina { border-color: #e8b817; box-shadow: 7px 7px 0 rgba(232,184,23,.23); }
.character-card.character-card--hina .character-card__visual { background: linear-gradient(135deg, #fff18a, #e8b817); }
.character-card.character-card--hina h2, .character-card.character-card--hina .role b { color: #b17a00; }

footer { padding: 33px 24px; text-align: center; color: #fff; background: var(--navy); }
.channel-logo--footer { width: 180px; height: 37px; margin: 0 auto 10px; }
.channel-logo--footer img { width: 180px; height: 37px; }
.portal-link { color: var(--yellow); font-size: .78rem; font-weight: 700; }
footer p { margin: 0 0 7px; font-size: .75rem; }

@media (max-width: 760px) {
  .site-header { padding: 9px 15px; }
  .channel-logo--header { width: 170px; height: 35px; flex-basis: 170px; }
  .channel-logo--header img { width: 170px; height: 35px; }
  .site-header nav { gap: 0; }
  .site-header nav a { padding: 2px 5px; font-size: .68rem; }
  .hero { min-height: 270px; }
  .hero__copy { padding: 20px; }
  .hero__copy span { font-size: .78rem; }
  .character-grid { grid-template-columns: 1fr; padding: 35px 22px 60px; }
  .character-card__visual { height: 205px; }
  .character-card__visual img { height: 198px; }
}