@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #1b1f2a;
  --muted: #5d6677;
  --accent: #d6a948;
  --accent-2: #2f6fab;
  --border: rgba(27, 31, 42, 0.12);
  --shadow: 0 16px 32px rgba(17, 24, 39, 0.12);
  --radius: 14px;
  --card-bg: linear-gradient(135deg, rgba(47, 111, 171, 0.18), rgba(214, 169, 72, 0.2));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 500px at 10% -10%, rgba(214, 169, 72, 0.16), transparent 60%),
    radial-gradient(700px 420px at 90% 0%, rgba(47, 111, 171, 0.12), transparent 55%),
    linear-gradient(180deg, #f9fafb 0%, #eef1f6 100%);
  min-height: 100vh;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

a {
  color: var(--accent-2);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Social Bar */
.social-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
}

.social-icon img {
  width: 24px;
  height: 24px;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.social-icon img:hover {
  transform: translateY(-2px) scale(1.05);
  filter: grayscale(0%);
  opacity: 1;
}

/* Header */
.header {
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.logo-container {
  text-align: center;
  padding: 28px 20px 10px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.channel-logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid rgba(27, 31, 42, 0.08);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.15);
  transition: transform 0.25s ease;
}

.channel-logo:hover {
  transform: scale(1.04);
}

.channel-name {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.channel-tagline {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.navigation-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 12px 20px 24px;
}

.navigation-bar a {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.navigation-bar a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* Hero */
.hero {
  padding: 64px 0 40px;
}

.hero .container {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 48px 48px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero .container::before {
  content: "";
  position: absolute;
  inset: -40% 40% auto -20%;
  height: 180%;
  background: radial-gradient(circle, rgba(214, 169, 72, 0.2), transparent 70%);
  pointer-events: none;
}

.hero h2 {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin: 0 0 12px;
  position: relative;
}

.hero p {
  font-size: 1.1rem;
  margin: 0 0 24px;
  color: var(--muted);
  position: relative;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.2);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
}

.cta-button:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

/* Section Titles */
.section-title {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 2rem;
  text-align: center;
  margin: 0 0 24px;
  color: var(--ink);
}

/* Universe Section */
.universe-section {
  padding: 64px 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.universe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.universe-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f172a;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.universe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.18);
}

.image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-wrapper .gif {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.universe-card:hover .image-wrapper .gif {
  opacity: 1;
}

.universe-card:hover .image-wrapper .still {
  opacity: 0;
}

.universe-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%);
}

.universe-card .overlay h3 {
  color: #ffffff;
  font-size: 1.25rem;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Blog Section */
.blog-section {
  padding: 64px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.blog-card {
  display: block;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.18);
}

.blog-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

  .bg-noxus { --card-bg: url("resources/posts_images/first-post/Aatrox first incarnation.png"); }
  .bg-races { --card-bg: url("resources/posts_images/races/Aatrox and an army of darkins.png"); }
  .bg-places { --card-bg: url("resources/posts_images/places/Piltover and Zaun Connected Cities.png"); }
  .bg-ascended { --card-bg: url("resources/posts_images/lol_ascended-creation/Aatrox pure ascended before corruption.png"); }
  .bg-darkin { --card-bg: url("resources/posts_images/lol_darkin-creation/Creations.png"); }
  .bg-nasus { --card-bg: url("resources/posts_images/lol_nasus/The curator.png"); }
  .bg-renekton { --card-bg: url("resources/posts_images/lol_renekton/renekton_carries_nasus_sun.png"); }
  .bg-aatrox { --card-bg: url("resources/posts_images/lol_aatrox/Aatrox and an army of darkins.png"); }
  .bg-azir { --card-bg: url("resources/posts_images/lol_azir/Amumu emperor.png"); }
  .bg-asol { --card-bg: url("resources/posts_images/lol_aurelion-sol/Aurelion_Sol.jpg"); }
  .bg-diana { --card-bg: url("resources/posts_images/lol_diana/Diana and Leona arguing inside an alcove.png"); }
  .bg-leona { --card-bg: url("resources/posts_images/lol_leona/Diana and Leona arguing inside an alcove.png"); }
  .bg-pantheon { --card-bg: url("resources/posts_images/lol_pantheon/Aatrox vs Pantheon on Mount Targon.png"); }
  .bg-rhaast { --card-bg: url("resources/posts_images/lol_rhaast/Rhaast&Jiraiya.png"); }
  .bg-taric { --card-bg: url("resources/posts_images/lol_taric/Garen arguing with Taric in an office.png"); }
  .bg-varus { --card-bg: url("resources/posts_images/lol_varus/Golden warrior queen sealing inside a fountain with Varus.png"); }
  .bg-xerath { --card-bg: url("resources/posts_images/lol_xerath/Azir & Xerath studying - twitter.png"); }
  .bg-naafiri { --card-bg: url("resources/posts_images/lol_naafiri/Naafiri being discovered by a researcher.png"); }
  .bg-zoe { --card-bg: url("resources/posts_images/lol_zoe/Zoe being on the edge of a cliff.png"); }
  .bg-rammus { --card-bg: url("resources/posts_images/lol_rammus/Cult of Rammus.png"); }
  .bg-darkin-rise { --card-bg: url("resources/posts_images/lol_darkin-rise/Aatrox and an army of darkins.png"); }
  .bg-zaahen { --card-bg: url("resources/posts_images/lol_zaahen/Zaahen ascended.png"); }
  .bg-yordles { --card-bg: url("resources/posts_images/lol_yordles/Other yordles battling with planes.png"); }
  .bg-amumu { --card-bg: url("resources/posts_images/lol_amumu/Amumu emperor.png"); }
  .bg-soraka { --card-bg: url("resources/posts_images/lol_soraka/Soraka and her proteges.png"); }
  .bg-imperium { --card-bg: url("resources/posts_images/wh40k_empire-introduction/The emperror.png"); }
  .bg-chaos-aeldari { --card-bg: url("resources/posts_images/wh40k_chaos-aeldari/Warrior.png"); }
  .bg-wh40k-38c-abaddon-the-despoiler-the-black-legion-forged { --card-bg: url("resources/posts_images/wh40k_38c-abaddon-the-despoiler-the-black-legion-forged/Black Legionaries.png"); }
.bg-orks-tyranids { --card-bg: url("resources/posts_images/wh40k_orks-tyranids/Orks during battle.png"); }
.bg-necrons-tau { --card-bg: url("resources/posts_images/wh40k_ctan-necrons-tau/C'tan alien.png"); }
.bg-primarchs { --card-bg: url("resources/posts_images/wh40k_empire-introduction/All primarchs gathered.png"); }

  .bg-wh40k-38a-abaddon-the-despoiler-deadly-beginnings { --card-bg: url("resources/posts_images/wh40k_38a-abaddon-the-despoiler-deadly-beginnings/Abaddon the despoiler.png"); }
  .bg-wh40k-38b-abaddon-the-despoiler-during-and-after-heresy { --card-bg: url("resources/posts_images/wh40k_38b-abaddon-the-despoiler-during-and-after-heresy/Abaddon the despoiler.png"); }
  .bg-wh40k-ciaphas-cain { --card-bg: url("resources/posts_images/wh40k_ciaphas-cain/Ciaphas Cain.png"); }
  .bg-wh40k-commander-dante { --card-bg: url("resources/posts_images/wh40k_commander-dante/Lord Commander Dante.png"); }
  .bg-wh40k-constantin-valdor { --card-bg: url("resources/posts_images/wh40k_constantin-valdor/Constantin Valdor.png"); }
  .bg-wh40k-description { --card-bg: url("resources/posts_images/wh40k_description/Abaddon after exile.png"); }
  .bg-wh40k-fabius-bile { --card-bg: url("resources/posts_images/wh40k_fabius-bile/Fabius Bile.png"); }
  .bg-wh40k-gregor-eisenhorn { --card-bg: url("resources/posts_images/wh40k_gregor-eisenhorn/Gregor Eisenhorn.png"); }
  .bg-wh40k-gregor-eisenhorn-s-abilities-and-wargear { --card-bg: url("resources/posts_images/wh40k_gregor-eisenhorn-s-abilities-and-wargear/Gregor Eisenhorn.png"); }
  .bg-wh40k-grey-knight-kaldor-draigo { --card-bg: url("resources/posts_images/wh40k_grey-knight-kaldor-draigo/Kaldor Draigo (2).png"); }
  .bg-wh40k-how-the-emperor-prepared-for-his-great-crusade { --card-bg: url("resources/posts_images/wh40k_how-the-emperor-prepared-for-his-great-crusade/Old Eisenhorn warning his friend of a great danger.png"); }
  .bg-wh40k-how-the-emperor-rose-to-power-and-it-s-early-life { --card-bg: url("resources/posts_images/wh40k_how-the-emperor-rose-to-power-and-it-s-early-life/Early psyker shamans.png"); }
  .bg-wh40k-inquisitor-gideon-ravenor { --card-bg: url("resources/posts_images/wh40k_inquisitor-gideon-ravenor/Gideon Ravenor generated.png"); }
  .bg-wh40k-introduction-to-warhammer-40k-universe { --card-bg: url("resources/posts_images/wh40k_introduction-to-warhammer-40k-universe/Abaddon after exile.png"); }
  .bg-wh40k-leandros { --card-bg: url("resources/posts_images/wh40k_leandros/Leandros sp1.png"); }
  .bg-wh40k-lord-solar-macharius { --card-bg: url("resources/posts_images/wh40k_lord-solar-macharius/Lord Solar Macharius angel.png"); }
  .bg-wh40k-marneus-calgar { --card-bg: url("resources/posts_images/wh40k_marneus-calgar/Marneus Calgar in game.PNG"); }
  .bg-wh40k-primarch-alpharius-omegon { --card-bg: url("resources/posts_images/wh40k_primarch-alpharius-omegon/Alpharius primarch.png"); }
  .bg-wh40k-primarch-angron { --card-bg: url("resources/posts_images/wh40k_primarch-angron/Daemon Primarch Angron.png"); }
  .bg-wh40k-primarch-angron-during-the-heresy { --card-bg: url("resources/posts_images/wh40k_primarch-angron-during-the-heresy/Angron pre heresy.png"); }
  .bg-wh40k-primarch-corvus-corax { --card-bg: url("resources/posts_images/wh40k_primarch-corvus-corax/Primarch Corax.png"); }
  .bg-wh40k-primarch-ferrus-manus { --card-bg: url("resources/posts_images/wh40k_primarch-ferrus-manus/Ferrus Manus.png"); }
  .bg-wh40k-primarch-fulgrim { --card-bg: url("resources/posts_images/wh40k_primarch-fulgrim/Fulgrim before corruption.png"); }
  .bg-wh40k-primarch-horus { --card-bg: url("resources/posts_images/wh40k_primarch-horus/All primarchs gathered.png"); }
  .bg-wh40k-primarch-jaghatai-khan { --card-bg: url("resources/posts_images/wh40k_primarch-jaghatai-khan/Primarch Jaghatai.png"); }
  .bg-wh40k-primarch-konrad-curze { --card-bg: url("resources/posts_images/wh40k_primarch-konrad-curze/Konrad Curze (2).png"); }
  .bg-wh40k-primarch-konrad-curze-after-heresy { --card-bg: url("resources/posts_images/wh40k_primarch-konrad-curze-after-heresy/Konrad Curze (2).png"); }
  .bg-wh40k-primarch-leman-russ { --card-bg: url("resources/posts_images/wh40k_primarch-leman-russ/Angron vs Leman Russ - Copy.png"); }
  .bg-wh40k-primarch-lion-el-jonson { --card-bg: url("resources/posts_images/wh40k_primarch-lion-el-jonson/Lion El'Jonson fighting on Caliban.png"); }
  .bg-wh40k-primarch-lorgar { --card-bg: url("resources/posts_images/wh40k_primarch-lorgar/Lorgar.png"); }
  .bg-wh40k-primarch-magnus-the-red { --card-bg: url("resources/posts_images/wh40k_primarch-magnus-the-red/Magnus the Red Primarch.png"); }
  .bg-wh40k-primarch-mortarion { --card-bg: url("resources/posts_images/wh40k_primarch-mortarion/Daemon_Primarch_Mortarion.png"); }
  .bg-wh40k-primarch-perturabo { --card-bg: url("resources/posts_images/wh40k_primarch-perturabo/Primarchs Perturabo.png"); }
  .bg-wh40k-primarch-roboute-guilliman { --card-bg: url("resources/posts_images/wh40k_primarch-roboute-guilliman/Primarchs_Bk_1_-_Roboute_Guilliman.png"); }
  .bg-wh40k-primarch-rogal-dorn { --card-bg: url("resources/posts_images/wh40k_primarch-rogal-dorn/Primarch Rogal Dorn.png"); }
  .bg-wh40k-primarch-sanguinius { --card-bg: url("resources/posts_images/wh40k_primarch-sanguinius/Sanguinius gets killed by Horus.png"); }
  .bg-wh40k-primarch-vulkan { --card-bg: url("resources/posts_images/wh40k_primarch-vulkan/Alpharius primarch.png"); }
  .bg-wh40k-saint-celestine { --card-bg: url("resources/posts_images/wh40k_saint-celestine/rasgov_Saint_Celestine_from_Warhammer_40k_with_white_wings_an_e7c89e66-ae80-4e7f-bd4e-d4f3eb31affb_0.png"); }
  .bg-wh40k-the-emperor-after-horus-heresy { --card-bg: url("resources/posts_images/wh40k_the-emperor-after-horus-heresy/The Emperor on Horus's heresy.png"); }
  .bg-wh40k-the-emperor-during-horus-s-heresy { --card-bg: url("resources/posts_images/wh40k_the-emperor-during-horus-s-heresy/The Emperor on Horus's heresy.png"); }
  .bg-wh40k-the-primarchs { --card-bg: url("resources/posts_images/wh40k_the-primarchs/All primarchs gathered.png"); }
  .bg-wh40k-the-two-missing-primarchs { --card-bg: url("resources/posts_images/wh40k_the-two-missing-primarchs/A craftworld in the universe.png"); }
  .bg-wh40k-trazyn-the-infinite { --card-bg: url("resources/posts_images/wh40k_trazyn-the-infinite/Trazyn the Infinite Lord.png"); }
  .bg-aion-aion-lore { --card-bg: url("resources/posts_images/aion_aion-lore/A drakan warrior.png"); }
  .bg-aion-description { --card-bg: url("resources/posts_images/aion_description/A drakan warrior.png"); }
  .bg-alistar { --card-bg: url("resources/posts_images/lol_alistar/Alistar black skin.jpg"); }
  .bg-ambessa { --card-bg: url("resources/posts_images/lol_ambessa/Ambessa and Mel.png"); }
  .bg-anivia { --card-bg: url("resources/posts_images/lol_anivia/Anivia in freljord.png"); }
  .bg-annie { --card-bg: url("resources/posts_images/lol_annie/Annie and her stepsister.png"); }
  .bg-ashe { --card-bg: url("resources/posts_images/lol_ashe/Ashe and Grena.png"); }
  .bg-asoiaf-daeron-the-daring { --card-bg: url("resources/posts_images/asoiaf_daeron-the-daring/Daeron the Daring.png"); }
  .bg-asoiaf-description { --card-bg: url("resources/posts_images/asoiaf_description/Aegon at the table.png"); }
  .bg-asoiaf-sir-duncan-the-tall { --card-bg: url("resources/posts_images/asoiaf_sir-duncan-the-tall/Duncan the Tall on the battlefield.jpg"); }
  .bg-blitzcrank { --card-bg: url("resources/posts_images/lol_blitzcrank/Blitzcrank art.png"); }
  .bg-braum { --card-bg: url("resources/posts_images/lol_braum/Big Braum.png"); }
  .bg-briar { --card-bg: url("resources/posts_images/lol_briar/Briar escaping.png"); }
  .bg-caitlyn { --card-bg: url("resources/posts_images/lol_caitlyn/Caitlyn arresting someone.png"); }
  .bg-camille { --card-bg: url("resources/posts_images/lol_camille/Camille and her love sad.png"); }
  .bg-cassiopeia { --card-bg: url("resources/posts_images/lol_cassiopeia/Cassiopeia and Sivir.png"); }
  .bg-corki { --card-bg: url("resources/posts_images/lol_corki/Corki patrolling with his squadron.png"); }
  .bg-darius { --card-bg: url("resources/posts_images/lol_darius/Darius and Draven.png"); }
  .bg-demacia { --card-bg: url("resources/posts_images/lol_demacia/Demacia in turmoil.png"); }
  .bg-dr-mundo { --card-bg: url("resources/posts_images/lol_dr-mundo/Dr Mundo art.png"); }
  .bg-dragon-dogma-description { --card-bg: url("resources/posts_images/dragon-dogma_description/Adventurers.jpg"); }
  .bg-dragon-dogma-dragon-s-dogma-ii-game-overview { --card-bg: url("resources/posts_images/dragon-dogma_dragon-s-dogma-ii-game-overview/Adventurers.jpg"); }
  .bg-draven { --card-bg: url("resources/posts_images/lol_draven/Daius and Draven as kids.png"); }
  .bg-ekko { --card-bg: url("resources/posts_images/lol_ekko/Mundo and Ekko.png"); }
  .bg-elden-ring-description { --card-bg: url("resources/posts_images/elden-ring_description/Astel art.png"); }
  .bg-elden-ring-godfrey-first-elden-lord-from-hero-to-exile { --card-bg: url("resources/posts_images/elden-ring_godfrey-first-elden-lord-from-hero-to-exile/First Elden Lord.png"); }
  .bg-elden-ring-malenia-vs-radahn-the-scarlet-rot-and-the-starscourge { --card-bg: url("resources/posts_images/elden-ring_malenia-vs-radahn-the-scarlet-rot-and-the-starscourge/Malenia vs Radahn.png"); }
  .bg-elden-ring-miquella-s-unfinished-dream-the-sleeping-empyrean-s-secret-schemes { --card-bg: url("resources/posts_images/elden-ring_miquella-s-unfinished-dream-the-sleeping-empyrean-s-secret-schemes/Malenia and Miquella.png"); }
  .bg-elden-ring-ranni-the-witch-the-rebellion-of-a-demigod-and-her-cosmic-destiny { --card-bg: url("resources/posts_images/elden-ring_ranni-the-witch-the-rebellion-of-a-demigod-and-her-cosmic-destiny/Ranni the Witch painting.png"); }
  .bg-elden-ring-the-greater-will-the-outer-gods-who-are-the-true-puppet-masters { --card-bg: url("resources/posts_images/elden-ring_the-greater-will-the-outer-gods-who-are-the-true-puppet-masters/Greater Will presence.png"); }
  .bg-elden-ring-the-shattering-explained-what-really-caused-the-war-of-the-demigods { --card-bg: url("resources/posts_images/elden-ring_the-shattering-explained-what-really-caused-the-war-of-the-demigods/Elden Ring Shattering.png"); }
  .bg-elden-ring-what-is-the-elden-ring-a-breakdown-of-its-true-nature-and-why-it-matters { --card-bg: url("resources/posts_images/elden-ring_what-is-the-elden-ring-a-breakdown-of-its-true-nature-and-why-it-matters/Hoarah Loux and his warriors.png"); }
  .bg-elden-ring-who-was-queen-marika-her-origin-motives-and-divine-manipulation { --card-bg: url("resources/posts_images/elden-ring_who-was-queen-marika-her-origin-motives-and-divine-manipulation/Marika the Queen.png"); }
  .bg-elise { --card-bg: url("resources/posts_images/lol_elise/Elise and future husband.png"); }
  .bg-ezreal { --card-bg: url("resources/posts_images/lol_ezreal/Base skin Ezreal.png"); }
  .bg-fiora { --card-bg: url("resources/posts_images/lol_fiora/Being caught, Fiora's father.png"); }
  .bg-fizz { --card-bg: url("resources/posts_images/lol_fizz/The boat that found Fizz.png"); }
  .bg-freljord { --card-bg: url("resources/posts_images/lol_freljord/Anivia in freljord.png"); }
  .bg-galio { --card-bg: url("resources/posts_images/lol_galio/Galio guarding over Demacia.png"); }
  .bg-garen { --card-bg: url("resources/posts_images/lol_garen/Darius vs Garen.png"); }
  .bg-general-introduction { --card-bg: url("resources/posts_images/lol_general-introduction/General Kalista.png"); }
  .bg-gnar { --card-bg: url("resources/posts_images/lol_gnar/Gnar following yeti tribes.png"); }
  .bg-gragas { --card-bg: url("resources/posts_images/lol_gragas/Furious Gragas.png"); }
  .bg-gwen { --card-bg: url("resources/posts_images/lol_gwen/Gwen champion image.png"); }
  .bg-hecarim { --card-bg: url("resources/posts_images/lol_hecarim/Hecarim human.png"); }
  .bg-heimerdinger { --card-bg: url("resources/posts_images/lol_heimerdinger/Heimerdinger as a man working at a new device.png"); }
  .bg-janna { --card-bg: url("resources/posts_images/lol_janna/Janna acting.png"); }
  .bg-jarvan-iv { --card-bg: url("resources/posts_images/lol_jarvan-iv/Jarvan hurt.png"); }
  .bg-jayce { --card-bg: url("resources/posts_images/lol_jayce/Jayce practicing.png"); }
  .bg-jinx { --card-bg: url("resources/posts_images/lol_jinx/Ekko vs Jinx.jpg"); }
  .bg-kalista { --card-bg: url("resources/posts_images/lol_kalista/General Kalista.png"); }
  .bg-karthus { --card-bg: url("resources/posts_images/lol_karthus/Human Karthus healthy.jpg"); }
  .bg-katarina { --card-bg: url("resources/posts_images/lol_katarina/Captain Jaredan getting secret orders to kill Katarina.png"); }
  .bg-kayle { --card-bg: url("resources/posts_images/lol_kayle/A child seeing Kayle.png"); }
  .bg-kayn { --card-bg: url("resources/posts_images/lol_kayn/Enemies of Kayn on the ground.png"); }
  .bg-kennen { --card-bg: url("resources/posts_images/lol_kennen/Kennen attacking the acolytes.png"); }
  .bg-kled { --card-bg: url("resources/posts_images/lol_kled/Kled entering the battlefield.png"); }
  .bg-leblanc { --card-bg: url("resources/posts_images/lol_leblanc/Elise talking with LeBlanc.png"); }
  .bg-lissandra { --card-bg: url("resources/posts_images/lol_lissandra/Lissandra alone.png"); }
  .bg-lucian { --card-bg: url("resources/posts_images/lol_lucian/Lucian and Senna on a boat.png"); }
  .bg-lulu { --card-bg: url("resources/posts_images/lol_lulu/Lulu and the childrens transformed.png"); }
  .bg-lux { --card-bg: url("resources/posts_images/lol_lux/promo_galio_lux.jpg"); }
  .bg-maokai { --card-bg: url("resources/posts_images/lol_maokai/Maokai creating the world.png"); }
  .bg-metin-2-description { --card-bg: url("resources/posts_images/metin-2_description/Chunjo.png"); }
  .bg-metin-2-metin-2-lore { --card-bg: url("resources/posts_images/metin-2_metin-2-lore/Chunjo.png"); }
  .bg-mordekaiser { --card-bg: url("resources/posts_images/lol_mordekaiser/Last Mage fighting Mordekaiser.png"); }
  .bg-morgana { --card-bg: url("resources/posts_images/lol_morgana/Kayle and Morgana.png"); }
  .bg-new-season-trailer { --card-bg: url("resources/posts_images/lol_new-season-trailer/Blitz cinematic trailer.jpg"); }
  .bg-norra { --card-bg: url("resources/posts_images/lol_norra/Norra and Yuumi.png"); }
  .bg-norse-mythology-description { --card-bg: url("resources/posts_images/norse-mythology_description/Aflheim from above.png"); }
  .bg-norse-mythology-freya-s-wedding-to-a-giant { --card-bg: url("resources/posts_images/norse-mythology_freya-s-wedding-to-a-giant/Freya angry.png"); }
  .bg-norse-mythology-odin-vili-and-ve-the-divine-architects-that-created-the-world-from-ymir-s-body { --card-bg: url("resources/posts_images/norse-mythology_odin-vili-and-ve-the-divine-architects-that-created-the-world-from-ymir-s-body/Odin and his brother fighting Ymir.png"); }
  .bg-norse-mythology-the-builder { --card-bg: url("resources/posts_images/norse-mythology_the-builder/The builder and his boat.png"); }
  .bg-norse-mythology-the-children-of-loki { --card-bg: url("resources/posts_images/norse-mythology_the-children-of-loki/Brokk being bothered by Loki again.png"); }
  .bg-norse-mythology-the-mead-of-poetry { --card-bg: url("resources/posts_images/norse-mythology_the-mead-of-poetry/Dwarf drinking from the mead of poetry.png"); }
  .bg-norse-mythology-the-treasures-of-the-gods-how-brokk-crafted-thor-s-hammer { --card-bg: url("resources/posts_images/norse-mythology_the-treasures-of-the-gods-how-brokk-crafted-thor-s-hammer/Thor showing his hammer.png"); }
  .bg-norse-mythology-thor-s-journey-in-the-land-of-the-giants { --card-bg: url("resources/posts_images/norse-mythology_thor-s-journey-in-the-land-of-the-giants/Land of the giants.png"); }
  .bg-norse-mythology-yggdrasil-the-nine-worlds-and-how-odin-drank-from-mimir-s-well { --card-bg: url("resources/posts_images/norse-mythology_yggdrasil-the-nine-worlds-and-how-odin-drank-from-mimir-s-well/Mimir's Well.png"); }
  .bg-nunu-willump { --card-bg: url("resources/posts_images/lol_nunu-willump/Nunu & Willump.png"); }
  .bg-olaf { --card-bg: url("resources/posts_images/lol_olaf/Olaf attacking the winter's claw.png"); }
  .bg-orianna { --card-bg: url("resources/posts_images/lol_orianna/Glorious Orianna.png"); }
  .bg-ornn { --card-bg: url("resources/posts_images/lol_ornn/Ornnkaal Rocks.png"); }
  .bg-piltover { --card-bg: url("resources/posts_images/lol_piltover/Ambessa arriving in Piltover.png"); }
  .bg-poppy { --card-bg: url("resources/posts_images/lol_poppy/Poppy fighting raptors.png"); }
  .bg-quinn { --card-bg: url("resources/posts_images/lol_quinn/Quinn and Caleb training.png"); }
  .bg-ranking-yordles-by-their-power-according-to-lore { --card-bg: url("resources/posts_images/lol_ranking-yordles-by-their-power-according-to-lore/Morgana and Kayle when they got their powers.png"); }
  .bg-rell { --card-bg: url("resources/posts_images/lol_rell/Crossbowman running from Rell.png"); }
  .bg-renata-glasc { --card-bg: url("resources/posts_images/lol_renata-glasc/Renata Glasc concept.png"); }
  .bg-riven { --card-bg: url("resources/posts_images/lol_riven/Riven and Yasuo.png"); }
  .bg-rumble { --card-bg: url("resources/posts_images/lol_rumble/Rumble being sick of people.png"); }
  .bg-samira { --card-bg: url("resources/posts_images/lol_samira/Samira champion image.png"); }
  .bg-sejuani { --card-bg: url("resources/posts_images/lol_sejuani/Ashe and Sejuani.png"); }
  .bg-senna { --card-bg: url("resources/posts_images/lol_senna/Lucian and Senna on a boat.png"); }
  .bg-seraphine { --card-bg: url("resources/posts_images/lol_seraphine/Seraphine and Acorn.png"); }
  .bg-shadow-isles { --card-bg: url("resources/posts_images/lol_shadow-isles/Shadow Isles before.png"); }
  .bg-shyvana { --card-bg: url("resources/posts_images/lol_shyvana/Ruination Shyvana.png"); }
  .bg-singed { --card-bg: url("resources/posts_images/lol_singed/Singed and SIlco.jpg"); }
  .bg-sion { --card-bg: url("resources/posts_images/lol_sion/Azir walking the stairs for the Ascension.png"); }
  .bg-sona { --card-bg: url("resources/posts_images/lol_sona/Lady Buvelle talking to Sona.png"); }
  .bg-swain { --card-bg: url("resources/posts_images/lol_swain/Swain&Naruto.png"); }
  .bg-sylas { --card-bg: url("resources/posts_images/lol_sylas/Garen vs Sylas.png"); }
  .bg-talon { --card-bg: url("resources/posts_images/lol_talon/Katarina fights Talon.png"); }
  .bg-targon { --card-bg: url("resources/posts_images/lol_targon/Aatrox vs Pantheon on Mount Targon.png"); }
  .bg-teemo { --card-bg: url("resources/posts_images/lol_teemo/Teemo&Wolverine.png"); }
  .bg-the-witcher-description { --card-bg: url("resources/posts_images/the-witcher_description/Cahir.png"); }
  .bg-the-witcher-leo-bonhart { --card-bg: url("resources/posts_images/the-witcher_leo-bonhart/Bonhart after terminating the rats.jpg"); }
  .bg-thresh { --card-bg: url("resources/posts_images/lol_thresh/mttargon-ancient-thresholds.jpg"); }
  .bg-tristana { --card-bg: url("resources/posts_images/lol_tristana/Sad Tristana.png"); }
  .bg-trundle { --card-bg: url("resources/posts_images/lol_trundle/Ryze and Trundle.png"); }
  .bg-tryndamere { --card-bg: url("resources/posts_images/lol_tryndamere/Aatrox attacking Tryndamere's tribe.png"); }
  .bg-twitch { --card-bg: url("resources/posts_images/lol_twitch/Twitch art.png"); }
  .bg-udyr { --card-bg: url("resources/posts_images/lol_udyr/Udyr and frozen troll.png"); }
  .bg-urgot { --card-bg: url("resources/posts_images/lol_urgot/Voss torturing Urgot.png"); }
  .bg-vayne { --card-bg: url("resources/posts_images/lol_vayne/Anime Vayne.png"); }
  .bg-veigar { --card-bg: url("resources/posts_images/lol_veigar/Mage defeated by veigar.png"); }
  .bg-vex { --card-bg: url("resources/posts_images/lol_vex/Vex and uncle Milty.png"); }
  .bg-vi { --card-bg: url("resources/posts_images/lol_vi/Alistar village.png"); }
  .bg-viego { --card-bg: url("resources/posts_images/lol_viego/Isolde, Gwen and Human Viego.png"); }
  .bg-viktor { --card-bg: url("resources/posts_images/lol_viktor/Blitz and Viktor.png"); }
  .bg-vladimir { --card-bg: url("resources/posts_images/lol_vladimir/Coount Vladimir and his servitors.png"); }
  .bg-volibear { --card-bg: url("resources/posts_images/lol_volibear/Ornn vs Volibear.jpg"); }
  .bg-warwick { --card-bg: url("resources/posts_images/lol_warwick/Warwick human and his childs.png"); }
  .bg-who-and-where-are-the-other-darkins { --card-bg: url("resources/posts_images/lol_who-and-where-are-the-other-darkins/Aatrox and an army of darkins.png"); }
  .bg-who-is-the-most-powerful-darkin { --card-bg: url("resources/posts_images/lol_who-is-the-most-powerful-darkin/Vladimir killing his darkin master.png"); }
  .bg-wow-description { --card-bg: url("resources/posts_images/wow_description/Arygos.png"); }
  .bg-wow-kalecgos-and-the-rebirth-of-the-blue-dragonflight-arygos-his-brother-sided-with-deathwing { --card-bg: url("resources/posts_images/wow_kalecgos-and-the-rebirth-of-the-blue-dragonflight-arygos-his-brother-sided-with-deathwing/Former Blue Dragonflight.png"); }
  .bg-xin-zhao { --card-bg: url("resources/posts_images/lol_xin-zhao/Jarvan III and Tianna Crownguard with Xin Zhao.png"); }
  .bg-yorick { --card-bg: url("resources/posts_images/lol_yorick/Yorick and Illaoi.png"); }
  .bg-zac { --card-bg: url("resources/posts_images/lol_zac/Alchemists at home with Zac.png"); }
  .bg-zaun { --card-bg: url("resources/posts_images/lol_zaun/Janna protecting Zaun.png"); }
  .bg-zeri { --card-bg: url("resources/posts_images/lol_zeri/Zeri after the earthquake.png"); }
  .bg-ziggs { --card-bg: url("resources/posts_images/lol_ziggs/Ziggs and Jinx.png"); }
.blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.7) 100%);
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  color: #ffffff;
}

.card-content h3 {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 1.4rem;
  margin: 0 0 8px;
}

.card-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Blog Page */
.toc {
  padding: 32px 0 10px;
}

.toc .container {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.toc h3 {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 1.6rem;
  margin: 0 0 16px;
  text-align: center;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.toc-link {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--accent-2);
  border-radius: 999px;
  color: var(--accent-2);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.toc-link:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.blog-list {
  padding: 48px 0;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin: 12px auto 24px;
}

.search-bar input {
  width: 100%;
  max-width: 520px;
  padding: 12px 18px;
  font-size: 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.search-bar input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Post Content */
.post-content {
  padding: 30px 24px;
  background-color: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: left;
  max-width: 920px;
  margin: 32px auto;
}

.post-content .container {
  width: 100%;
  max-width: 100%;
}

.post-hero {
  height: clamp(180px, 32vw, 320px);
  border-radius: var(--radius);
  background-image: var(--hero-bg, var(--card-bg));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 100%);
}

.post-content h2 {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 2rem;
  color: var(--ink);
  margin-top: 0;
}

.post-content h3 {
  font-size: 1.5rem;
  color: var(--ink);
}

.post-title {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0 0 6px;
  color: var(--ink);
}

.post-meta {
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: var(--muted);
}

.post-lead {
  font-size: 1.1rem;
  color: var(--ink);
}

.post-toc {
  margin: 18px 0 28px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.post-toc h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.post-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.post-toc-list a {
  color: var(--ink);
  font-weight: 600;
}

.post-toc-list a:hover {
  color: var(--accent-2);
}

.post-content p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.post-content iframe {
  width: 100%;
  height: clamp(220px, 45vw, 420px);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
  margin: 18px 0 28px;
}

.post-callout {
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--ink);
}

/* Related Posts */
.related-posts {
  padding: 10px 0 64px;
}

.related-posts .container {
  max-width: 920px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.related-card {
  min-height: 180px;
}

.related-card .card-content {
  padding: 18px;
}

.post-content img {
  width: min(100%, 920px);
  max-height: min(62vh, 560px);
  margin: 24px auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.9));
}

.post-content img.post-image-landscape {
  width: 100%;
  height: clamp(240px, 42vw, 520px);
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.post-content img.post-image-balanced {
  width: min(100%, 760px);
  max-height: min(66vh, 620px);
}

.post-content img.post-image-portrait {
  width: min(100%, 560px);
  max-height: min(72vh, 760px);
}

@media (max-width: 720px) {
  .post-content img {
    max-height: min(54vh, 420px);
    margin: 18px auto;
  }

  .post-content img.post-image-landscape {
    height: clamp(200px, 56vw, 320px);
  }

  .post-content img.post-image-balanced,
  .post-content img.post-image-portrait {
    width: 100%;
    max-height: min(62vh, 520px);
  }
}

/* About + Contact */
.about,
.contact {
  text-align: left;
  padding: 32px;
  max-width: 820px;
  margin: 40px auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about h2,
.contact h2,
.blog-list h2 {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 2rem;
  margin-top: 0;
}

.contact ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.contact li {
  margin: 10px 0;
}

/* Blog Listing */
.blog-list .post,
.post {
  background-color: var(--surface);
  margin: 20px 0;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Latest Posts */
.latest-posts {
  margin: 40px 0;
  padding: 20px;
  background-color: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.post-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.post a {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent-2);
  text-decoration: underline;
}

.post a:hover {
  color: var(--accent);
}

.back-to-home {
  display: inline-block;
  padding: 10px 16px;
  background-color: var(--ink);
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
}

.back-to-home:hover {
  background-color: var(--accent);
  color: var(--ink);
}

/* Footer */
footer {
  background: var(--ink);
  color: #e6e8ee;
  text-align: center;
  padding: 18px 0;
  margin-top: 40px;
}

footer p {
  margin: 0;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .logo-link {
    flex-direction: column;
  }

  .channel-logo {
    width: 84px;
    height: 84px;
  }

  .channel-name {
    font-size: 2rem;
  }

  .navigation-bar {
    gap: 16px;
    padding-bottom: 18px;
  }

  .hero .container {
    padding: 32px 24px;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .card-content {
    padding: 18px;
  }
}