:root { --red:#e4242a; --aqua:#06cce1; --dark:#111; --dark-2:#1c1c1c; --copy:#666; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:"Open Sans",Arial,sans-serif; color:#333; background:#fff; }.container { width:min(1030px,calc(100% - 48px)); margin:auto; }.header { min-height:570px; color:#fff; background:linear-gradient(90deg,rgba(19,10,61,.50),rgba(35,17,110,.08)),url("assets/header-background.jpg") center/cover; overflow:hidden; }.navbar { position:fixed; z-index:10; inset:0 0 auto; width:100%; height:68px; padding:0 max(24px,calc((100vw - 1030px) / 2)); display:flex; align-items:center; background:rgba(22,12,74,.35); border-bottom:1px solid rgba(255,255,255,.20); backdrop-filter:blur(7px); }.logo { color:#fff; display:flex; align-items:center; gap:9px; text-decoration:none; font:700 13px/1.2 Montserrat,sans-serif; letter-spacing:.3px; white-space:nowrap; }.logo img { width:40px; height:40px; object-fit:contain; }.nav-links { margin-left:auto; display:flex; gap:23px; }.nav-links a { color:#fff; font:700 13px Montserrat,sans-serif; text-transform:uppercase; text-decoration:none; opacity:.96; }.nav-links a:hover { color:var(--aqua); }.menu-toggle { display:none; }.hero-content { min-height:570px; padding-top:68px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }.text-container { padding-bottom:22px; }.text-container h1 { max-width:600px; margin:0; font:700 clamp(28px,2.25vw,32px)/1.25 Montserrat,sans-serif; letter-spacing:-.65px; }.text-container h1 span { color:var(--aqua); animation:aqua-blink 3s ease-in-out infinite; }.text-container p { margin:10px 0 31px; font-size:16px; }.btn-solid { width:227px; height:50px; border-radius:28px; display:inline-flex; flex-direction:row; justify-content:center; align-items:center; gap:9px; color:#fff; background:#06c5d8; box-shadow:none; font:700 13px Montserrat,sans-serif; text-decoration:none; text-transform:none; text-align:center; transition:.25s transform,.25s background,.25s box-shadow; animation:none; }.btn-solid span { font-size:16px; }.btn-solid:hover { transform:translateY(-2px); background:#03adbd; box-shadow:0 7px 18px rgba(0,0,0,.22); animation:none; }.image-container { height:430px; display:flex; align-items:end; justify-content:center; }.image-container img { width:125%; max-width:575px; transform:translate(30px,30px); filter:drop-shadow(0 14px 17px rgba(0,0,0,.24)); }.notice { background:#fff; text-align:center; padding:88px 0 78px; }.notice-inner { max-width:800px; }.label { color:var(--red); font:700 12px Montserrat,sans-serif; letter-spacing:1.8px; margin:0 0 12px; }.notice h2,.episode-section h2 { margin:0; font:700 clamp(28px,3vw,39px)/1.3 Montserrat,sans-serif; color:#292929; }.notice h2 span { color:var(--red); }.notice p:not(.label) { margin:22px auto 0; color:var(--copy); line-height:1.8; max-width:720px; }.episode-section { background:#f7f7f7; padding:72px 0 86px; }.episode-section h2 { text-align:center; margin-bottom:34px; }.episode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.episode-card { min-height:135px; padding:23px; display:grid; grid-template-columns:1fr auto; color:#292929; background:#fff; border:1px solid #e5e5e5; text-decoration:none; transition:.2s; }.episode-card:hover { border-color:var(--red); transform:translateY(-3px); box-shadow:0 9px 22px rgba(0,0,0,.08); }.episode-card b { color:var(--red); font:700 16px Montserrat,sans-serif; }.episode-card span { align-self:end; font:600 15px Montserrat,sans-serif; }.episode-card i { align-self:end; color:var(--red); font-style:normal; font-size:21px; }.footer { color:#bbb; background:var(--dark-2); }.footer-columns { display:grid; grid-template-columns:1.2fr 1fr .85fr; gap:70px; padding:58px 0 52px; }.footer h3 { color:#fff; margin:0 0 19px; font:700 17px Montserrat,sans-serif; }.footer p,.footer li { margin:0; font-size:13px; line-height:1.8; }.footer ul { padding:0; list-style:none; }.footer li { margin-bottom:9px; }.footer li::before { content:"■"; margin-right:9px; color:var(--red); font-size:9px; }.footer a { color:#d1d1d1; text-decoration:none; }.footer a:hover { color:#fff; }.socials { margin-top:17px; display:flex; gap:10px; }.socials a { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--red); font-weight:bold; }.copyright { padding:21px 0; background:#131313; font-size:12px; text-align:center; } @keyframes aqua-blink { 0%,46% { opacity:1; text-shadow:0 0 12px rgba(0,241,239,.7); } 50%,96% { opacity:.18; text-shadow:none; } 100% { opacity:1; text-shadow:0 0 12px rgba(0,241,239,.7); } } @media (max-width:760px) { .container{width:min(100% - 34px,560px)}.header{min-height:auto}.navbar{height:68px;padding:0 17px}.logo{font-size:11px;letter-spacing:.1px}.logo img{width:38px;height:38px}.nav-links{display:none}.menu-toggle{display:block;margin-left:auto;border:0;background:transparent;color:#fff;font-size:25px}.hero-content{min-height:0;padding-top:68px;display:block}.text-container{padding:65px 0 22px}.text-container h1{font-size:29px}.image-container{height:335px}.image-container img{width:120%;transform:translate(12px,20px)}.notice{padding:65px 0}.episode-grid{grid-template-columns:1fr 1fr}.footer-columns{grid-template-columns:1fr;gap:30px;padding:48px 0}.copyright{text-align:left}.text-container p{font-size:15px} } @media (max-width:410px) {.episode-grid{grid-template-columns:1fr}.image-container{height:285px}}