/*
Theme Name: Wildsave
Author: Wildsave
Description: A colorful editorial WordPress theme for independent games news, reviews, guides, and deals. Converted from the Wildsave front-page mockup.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wildsave
Tags: news, blog, magazine, custom-menu, featured-images, threaded-comments, translation-ready
*/


    :root {
      --ink: #26336b;
      --ink-soft: #414685;
      --paper: #fff8e7;
      --paper-muted: #d7d1ca;
      --cyan: #32e7ff;
      --blue: #487cff;
      --violet: #9b67ff;
      --magenta: #ff4fd8;
      --coral: #ff625f;
      --orange: #ff9b3d;
      --yellow: #f4f542;
      --lime: #baf732;
      --green: #3cf29d;
      --teal: #20dac4;
      --rule: rgba(255,255,255,.28);
      --display: "Bahnschrift Condensed", "Aptos Display", "Arial Narrow", "Helvetica Neue", sans-serif;
      --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: #5261a8; }
    body {
      margin: 0;
      color: var(--paper);
      background:
        radial-gradient(circle at 7% 48%, rgba(255,104,190,.55), transparent 29rem),
        radial-gradient(circle at 89% 70%, rgba(46,225,220,.48), transparent 31rem),
        linear-gradient(135deg, #5969ad 0%, #765b9e 45%, #338592 100%);
      font-family: var(--body);
      overflow-x: hidden;
    }

    button, a { font: inherit; }
    a { color: inherit; text-decoration: none; }
    button { color: inherit; }
    h1, h2, h3, p, li, a, button {
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .skip-link {
      position: fixed;
      z-index: 1000;
      left: 1rem;
      top: 1rem;
      transform: translateY(-200%);
      background: var(--paper);
      color: var(--ink);
      padding: .75rem 1rem;
      font-weight: 800;
    }
    .skip-link:focus { transform: translateY(0); }

    .site-header {
      position: sticky;
      z-index: 100;
      top: 0;
      height: 76px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
      align-items: center;
      gap: 1rem;
      padding: 0 clamp(20px, 2.1vw, 42px);
      background: rgba(42,49,111,.96);
      border-bottom: 3px solid transparent;
      border-image: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--orange), var(--yellow), var(--lime), var(--teal)) 1;
      backdrop-filter: blur(16px);
    }

    .wordmark {
      justify-self: start;
      font-family: var(--display);
      font-size: clamp(2.15rem, 3.35vw, 4rem);
      font-stretch: condensed;
      font-weight: 750;
      line-height: .86;
      letter-spacing: -.025em;
      color: var(--paper);
      text-shadow: 3px 0 0 rgba(50,231,255,.16), -3px 0 0 rgba(255,79,216,.11);
    }

    .primary-nav { justify-self: center; }
    .primary-nav {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .primary-nav::-webkit-scrollbar { display: none; }
    .primary-nav ul {
      display: flex;
      align-items: center;
      gap: clamp(1rem, 3vw, 3.75rem);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .primary-nav a {
      position: relative;
      display: block;
      padding: 1.65rem 0 1.5rem;
      font-family: var(--display);
      font-weight: 700;
      font-size: .94rem;
      letter-spacing: .19em;
    }
    .primary-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: .19em;
      bottom: 1.05rem;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
      background: var(--nav-color, var(--cyan));
    }
    .primary-nav li:nth-child(1) a { --nav-color: var(--cyan); }
    .primary-nav li:nth-child(2) a { --nav-color: var(--violet); }
    .primary-nav li:nth-child(3) a { --nav-color: var(--green); }
    .primary-nav li:nth-child(4) a { --nav-color: var(--magenta); }
    .primary-nav li:nth-child(5) a { --nav-color: var(--yellow); }
    .primary-nav li:nth-child(6) a { --nav-color: var(--orange); }
    .primary-nav a:hover::after,
    .primary-nav a:focus-visible::after { transform: scaleX(1); }

    .header-actions {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .icon-button,
    .newsletter-button {
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    .icon-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
    }
    .icon-button:hover,
    .icon-button:focus-visible { background: rgba(50,231,255,.13); outline: 1px solid var(--cyan); }
    .search-icon {
      width: 18px;
      height: 18px;
      border: 2px solid var(--paper);
      border-radius: 50%;
      position: relative;
    }
    .search-icon::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 2px;
      right: -6px;
      bottom: -3px;
      transform: rotate(45deg);
      background: var(--paper);
    }
    .newsletter-button {
      min-height: 42px;
      padding: 0 1.35rem;
      border: 1px solid var(--lime);
      color: var(--lime);
      font-family: var(--display);
      font-weight: 700;
      letter-spacing: .16em;
      transition: background .2s, color .2s, box-shadow .2s;
    }
    .newsletter-button:hover,
    .newsletter-button:focus-visible {
      color: #26336b;
      background: linear-gradient(90deg, var(--yellow), var(--lime));
      box-shadow: 0 0 24px rgba(186,247,50,.25);
    }

    .search-drawer {
      position: fixed;
      z-index: 90;
      top: 76px;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1rem;
      padding: 1rem clamp(20px, 4vw, 76px);
      transform: translateY(-140%);
      transition: transform .25s ease;
      background: #484984;
      border-bottom: 1px solid var(--cyan);
    }
    .search-drawer[data-open="true"] { transform: translateY(0); }
    .search-drawer input {
      width: 100%;
      border: 0;
      border-bottom: 2px solid var(--violet);
      padding: .55rem 0;
      background: transparent;
      color: var(--paper);
      font: 800 1.35rem var(--display);
      letter-spacing: .04em;
      outline: none;
    }
    .search-drawer button {
      border: 1px solid var(--cyan);
      background: transparent;
      color: var(--cyan);
      padding: .6rem 1rem;
      cursor: pointer;
      font-weight: 800;
    }

    .hero {
      position: relative;
      min-height: clamp(480px, 34vw, 650px);
      isolation: isolate;
      border-bottom: 1px solid rgba(50,231,255,.48);
      overflow: hidden;
      background: #4b4f95;
    }
    .hero-art {
      position: absolute;
      inset: 0;
      z-index: -2;
    }
    .hero-art svg { width: 100%; height: 100%; display: block; }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(38,43,99,.99) 0%, rgba(38,43,99,.93) 24%, rgba(38,43,99,.36) 53%, rgba(38,43,99,.06) 100%),
        linear-gradient(0deg, rgba(29,39,83,.64), transparent 38%);
    }
    .hero-copy {
      width: min(720px, 47vw);
      min-width: 0;
      padding: clamp(38px, 4.5vw, 86px) 0 42px clamp(24px, 2.5vw, 48px);
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin: 0 0 1.1rem;
      font-family: var(--display);
      font-weight: 750;
      font-size: 1rem;
      letter-spacing: .2em;
      color: var(--accent, var(--cyan));
      text-transform: uppercase;
    }
    .eyebrow::after {
      content: "";
      width: 54px;
      height: 2px;
      background: currentColor;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 700px;
      margin-bottom: 1.25rem;
      padding-bottom: .14em;
      border-bottom: clamp(5px, .45vw, 9px) solid var(--magenta);
      font-family: var(--display);
      font-size: clamp(3.9rem, 5.9vw, 7.7rem);
      font-weight: 700;
      line-height: .89;
      letter-spacing: -.025em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    h1 .rainbow-word {
      color: var(--paper);
      text-decoration: none;
      text-shadow: 4px 0 0 rgba(50,231,255,.12);
    }
    .deck {
      max-width: 610px;
      margin-bottom: 1.15rem;
      color: #f8f4ec;
      font-size: clamp(1rem, 1.16vw, 1.28rem);
      line-height: 1.48;
    }
    .meta {
      display: flex;
      gap: .7rem;
      align-items: center;
      margin-bottom: 1.45rem;
      font-family: var(--display);
      font-weight: 800;
      font-size: .77rem;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .meta .dot { color: var(--cyan); font-size: 1.2rem; line-height: 0; }
    .story-link {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .8rem;
      max-width: 100%;
      padding: .35rem 0 .55rem;
      border-bottom: 2px solid currentColor;
      color: var(--accent, var(--cyan));
      font-family: var(--display);
      font-weight: 750;
      font-size: .9rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      transition: gap .2s ease, filter .2s ease;
    }
    .story-link:hover,
    .story-link:focus-visible { gap: 1.2rem; filter: brightness(1.25); }
    .hero-spectrum {
      position: absolute;
      right: 1.6rem;
      bottom: 1.4rem;
      display: flex;
      gap: 5px;
    }
    .hero-spectrum span { width: 34px; height: 4px; background: var(--c); }
    .issue-marker {
      position: absolute;
      z-index: 6;
      top: 50%;
      right: .25rem;
      display: flex;
      align-items: center;
      gap: .7rem;
      transform: translateY(-50%) rotate(-90deg);
      color: var(--paper);
      font: 700 .76rem/1 var(--display);
      letter-spacing: .2em;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 2px 8px rgba(28,36,81,.45);
    }
    .issue-marker::before {
      content: "";
      width: 38px;
      height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
    }
    .issue-year { color: var(--yellow); }

    .editorial-flow {
      position: relative;
      width: 100%;
      background:
        radial-gradient(circle at 12% 82%, rgba(255,98,95,.2), transparent 28rem),
        linear-gradient(135deg, rgba(155,103,255,.38), rgba(32,218,196,.18) 70%),
        #515aa1;
    }
    .editorial-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      pointer-events: none;
      background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(10vw - 1px), rgba(255,255,255,.085) calc(10vw - 1px), rgba(255,255,255,.085) 10vw);
    }

    .story-stage {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(430px, .84fr);
      align-items: stretch;
      border-bottom: 1px solid var(--rule);
    }

    .worlds {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(270px, .7fr);
      min-height: 650px;
      border-right: 1px solid rgba(50,231,255,.32);
      background: linear-gradient(155deg, #5d52a3, #3c6397 68%, #327f91);
    }
    .media-shell {
      position: relative;
      min-width: 0;
      isolation: isolate;
    }
    .media-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #5262a0;
    }
    .media-bg svg { display: block; width: 100%; height: 100%; }
    .media-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(0deg, rgba(38,51,107,.4), transparent 45%);
    }
    .popout {
      position: absolute;
      z-index: 3;
      pointer-events: none;
      filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)) drop-shadow(0 0 5px var(--pop-glow, rgba(50,231,255,.78)));
    }
    .worlds-creature {
      right: 2.5%;
      bottom: -1px;
      width: min(36%, 295px);
      transform: translateY(-5px);
    }
    .worlds-copy {
      position: relative;
      z-index: 4;
      min-width: 0;
      align-self: center;
      padding: 2.5rem clamp(1.5rem, 2vw, 2.7rem);
      --accent: var(--violet);
    }
    .worlds-copy::before {
      content: "01";
      position: absolute;
      z-index: -1;
      right: .35rem;
      top: .15rem;
      color: rgba(155,103,255,.13);
      font: 700 7rem/1 var(--display);
    }
    .worlds h2,
    .review h2,
    .guides h2 {
      margin-bottom: .8rem;
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(2.45rem, 3.2vw, 4.25rem);
      line-height: .96;
      letter-spacing: -.01em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .story-summary {
      color: var(--paper-muted);
      line-height: 1.52;
      font-size: .98rem;
    }

    .review {
      position: relative;
      min-height: 650px;
      display: grid;
      grid-template-columns: minmax(210px, .75fr) minmax(290px, 1.25fr);
      background:
        radial-gradient(circle at 92% 0%, rgba(255,113,221,.42), transparent 31%),
        linear-gradient(145deg, #71448f, #3f5292 54%, #2d758e);
      border-bottom: 1px solid rgba(255,79,216,.35);
      overflow: visible;
      --accent: var(--yellow);
    }
    .review-copy {
      position: relative;
      z-index: 4;
      min-width: 0;
      padding: 2.5rem 1.7rem 2rem clamp(1.5rem, 2.2vw, 2.75rem);
      align-self: center;
    }
    .review-score {
      display: flex;
      align-items: end;
      gap: .75rem;
      margin: .8rem 0 1rem;
    }
    .review-score strong {
      color: var(--lime);
      font-family: var(--display);
      font-size: clamp(6rem, 8vw, 10rem);
      line-height: .7;
      text-shadow: 0 0 28px rgba(186,247,50,.18);
    }
    .review-score span {
      padding-bottom: .35rem;
      color: var(--yellow);
      font: 700 .8rem var(--display);
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    .review-media {
      position: relative;
      min-width: 0;
      overflow: visible;
    }
    .review-media .media-bg { inset: 0; }
    .review-heroine {
      --pop-glow: rgba(255,79,216,.72);
      right: max(-50px, -1.25vw);
      bottom: 0;
      width: auto;
      height: min(760px, calc(100% + 50px));
      max-width: calc(100% + 50px);
      aspect-ratio: 560 / 760;
      transform: none;
    }

    .guides {
      position: relative;
      display: grid;
      grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
      min-height: 355px;
      margin-top: 0;
      z-index: 5;
      border-right: 1px solid rgba(60,242,157,.31);
      background: linear-gradient(135deg, #218c87, #356f91 44%, #5b4d99 100%);
      --accent: var(--green);
    }
    .guides-media {
      margin: 1.5rem 0 0 clamp(24px, 2.2vw, 42px);
      min-height: 330px;
      border: 1px solid rgba(60,242,157,.48);
    }
    .guide-creature {
      --pop-glow: rgba(60,242,157,.8);
      left: 8%;
      top: -17px;
      width: min(51%, 250px);
    }
    .guide-fliers {
      --pop-glow: rgba(255,155,61,.7);
      right: 2.5%;
      top: 6%;
      width: min(32%, 170px);
    }
    .guides-copy {
      min-width: 0;
      align-self: center;
      padding: 2rem clamp(1.4rem, 2.4vw, 3rem);
    }
    .guide-columns {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr);
      gap: clamp(1.5rem, 2.7vw, 3.5rem);
      align-items: start;
    }
    .guide-index { counter-reset: guide; }
    .guide-index div {
      counter-increment: guide;
      display: grid;
      grid-template-columns: 2.3rem 1fr;
      gap: .35rem;
      padding: .62rem 0;
      border-bottom: 1px solid rgba(186,247,50,.28);
      font: 700 .78rem var(--display);
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .guide-index div::before {
      content: "0" counter(guide);
      color: var(--cyan);
      font-size: 1.2rem;
      letter-spacing: 0;
    }

    .news-rail {
      position: relative;
      min-width: 0;
      height: 100%;
      min-height: 260px;
      padding: 1.8rem clamp(1.5rem, 2.7vw, 3rem) 2rem;
      background:
        linear-gradient(90deg, rgba(72,124,255,.3), rgba(255,79,216,.13) 70%, transparent),
        #416ba4;
    }
    .news-title {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 0 0 .7rem;
      color: var(--cyan);
      font: 750 1rem var(--display);
      letter-spacing: .21em;
      text-transform: uppercase;
    }
    .news-title::after {
      content: "";
      height: 2px;
      flex: 1;
      background: linear-gradient(90deg, var(--cyan), var(--violet), transparent);
    }
    .news-list { list-style: none; margin: 0; padding: 0; }
    .news-list li {
      display: grid;
      grid-template-columns: 5px 1fr auto;
      align-items: center;
      gap: 1rem;
      min-height: 52px;
      border-bottom: 1px solid var(--rule);
      color: #f4f0e7;
    }
    .news-list li::before { content: ""; width: 5px; height: 23px; background: var(--news-accent); }
    .news-list li:nth-child(1) { --news-accent: var(--magenta); }
    .news-list li:nth-child(2) { --news-accent: var(--orange); }
    .news-list li:nth-child(3) { --news-accent: var(--green); }
    .news-list a { line-height: 1.3; }
    .news-list a:hover,
    .news-list a:focus-visible { color: var(--news-accent); }
    .news-list time {
      color: var(--cyan);
      font: 800 .67rem var(--display);
      letter-spacing: .15em;
      white-space: nowrap;
    }

    .article-feed {
      position: relative;
      padding: clamp(2.6rem, 4.8vw, 5.5rem) 0 4rem;
      background:
        radial-gradient(circle at 84% 16%, rgba(244,245,66,.16), transparent 23rem),
        radial-gradient(circle at 9% 78%, rgba(255,79,216,.18), transparent 27rem),
        linear-gradient(150deg, #4a6fa3, #65549b 48%, #31888e);
    }
    .art-library {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .feed-heading {
      position: relative;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 2rem;
      margin-inline: clamp(20px, 3.5vw, 68px);
      margin-bottom: clamp(1.6rem, 2.5vw, 2.8rem);
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255,255,255,.34);
    }
    .feed-heading::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: min(260px, 42vw);
      height: 3px;
      background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--yellow));
    }
    .feed-heading h2 {
      margin: 0;
      font: 700 clamp(2.8rem, 4.4vw, 5.6rem)/.95 var(--display);
      letter-spacing: -.015em;
      text-transform: uppercase;
    }
    .feed-heading p {
      max-width: 420px;
      margin: 0 0 .3rem;
      color: var(--paper-muted);
      line-height: 1.5;
      text-align: right;
    }
    .article-grid {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      gap: 0;
    }
    .article-card {
      --card-accent: var(--cyan);
      --card-width: 50%;
      flex: 0 0 var(--card-width);
      min-width: 0;
      overflow: hidden;
      background: rgba(67,75,145,.78);
      border: 1px solid rgba(255,255,255,.25);
      box-shadow: 0 14px 34px rgba(43,47,104,.22);
      transition: transform .2s ease, border-color .2s ease;
    }
    .article-card:nth-child(1) { --card-width: 58%; }
    .article-card:nth-child(2) { --card-width: 42%; }
    .article-card:nth-child(3) { --card-width: 37%; }
    .article-card:nth-child(4) { --card-width: 63%; }
    .article-card:nth-child(5) { --card-width: 52%; }
    .article-card:nth-child(6) { --card-width: 48%; }
    .article-card:nth-child(2),
    .article-card:nth-child(5) { --card-accent: var(--magenta); background: rgba(107,71,145,.76); }
    .article-card:nth-child(3),
    .article-card:nth-child(6) { --card-accent: var(--lime); background: rgba(47,116,132,.76); }
    .article-card:hover,
    .article-card:focus-within { transform: translateY(-4px); border-color: var(--card-accent); }
    .article-image {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #5365a5;
      border-bottom: 4px solid var(--card-accent);
    }
    .article-image svg { display: block; width: 100%; height: 100%; }
    .article-image::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 38%;
      background: linear-gradient(transparent, rgba(38,51,107,.42));
      pointer-events: none;
    }
    .article-body { min-width: 0; padding: 1.15rem 1.2rem 1.45rem; }
    .article-kicker {
      margin-bottom: .55rem;
      color: var(--card-accent);
      font: 750 .72rem/1 var(--display);
      letter-spacing: .19em;
      text-transform: uppercase;
    }
    .article-card h3 {
      margin-bottom: .65rem;
      font: 700 clamp(1.45rem, 1.8vw, 2.15rem)/1.04 var(--display);
      letter-spacing: -.005em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .article-card h3 a:hover,
    .article-card h3 a:focus-visible { color: var(--card-accent); }
    .article-card p:not(.article-kicker):not(.article-meta) {
      min-height: 3em;
      margin-bottom: 1rem;
      color: var(--paper-muted);
      line-height: 1.5;
    }
    .article-meta {
      margin: 0;
      color: #f7f2e9;
      font: 650 .68rem/1 var(--display);
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .feed-continuation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .8rem;
      margin: 2.6rem 0 0;
      color: var(--cyan);
      font: 700 .78rem/1 var(--display);
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .feed-continuation span { color: var(--yellow); font-size: 1.4rem; }

    .site-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: end;
      padding: 2.5rem clamp(24px, 4vw, 76px);
      background: #55447f;
      border-top: 1px solid var(--rule);
    }
    .site-footer strong { display: block; font: 750 2.5rem var(--display); letter-spacing: -.015em; }
    .site-footer p { margin: .5rem 0 0; color: var(--paper-muted); }
    .footer-spectrum { display: flex; gap: 4px; }
    .footer-spectrum span { width: clamp(18px, 3vw, 48px); height: 7px; background: var(--c); }

    .dialog-backdrop {
      position: fixed;
      z-index: 500;
      inset: 0;
      display: none;
      place-items: center;
      padding: 1.5rem;
      background: rgba(31,37,81,.74);
      backdrop-filter: blur(8px);
    }
    .dialog-backdrop[data-open="true"] { display: grid; }
    .newsletter-dialog {
      width: min(540px, 100%);
      padding: 2rem;
      background: linear-gradient(#61519b, #3d6391) padding-box, linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), var(--green)) border-box;
      border: 2px solid transparent;
      box-shadow: 0 24px 90px rgba(0,0,0,.55);
    }
    .newsletter-dialog h2 { margin-bottom: .6rem; font: 700 3rem/.98 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
    .newsletter-dialog p { color: var(--paper-muted); line-height: 1.5; }
    .newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: .75rem; }
    .newsletter-form input { min-width: 0; border: 1px solid var(--cyan); background: rgba(40,51,105,.68); color: white; padding: .85rem; }
    .newsletter-form button { border: 0; background: linear-gradient(90deg, var(--yellow), var(--lime)); color: #283469; padding: .85rem 1rem; font-weight: 750; cursor: pointer; }
    .dialog-close { float: right; border: 0; background: transparent; color: white; font-size: 1.6rem; cursor: pointer; }

    @media (max-width: 1220px) {
      .site-header { grid-template-columns: auto 1fr auto; }
      .primary-nav ul { gap: 1.5rem; }
      .newsletter-button { padding: 0 .85rem; }
      .story-stage { grid-template-columns: 1fr; }
      .worlds { min-height: 520px; border-right: 0; }
      .review { min-height: 560px; grid-template-columns: minmax(240px,.7fr) minmax(360px,1.3fr); }
      .guides { margin-top: 0; border-right: 0; }
      .news-rail { min-height: 230px; }
    }

    @media (max-width: 900px) {
      .site-header { height: auto; min-height: 76px; grid-template-columns: 1fr auto; }
      .primary-nav { grid-column: 1 / -1; width: calc(100% + 40px); margin: 0 -20px; overflow-x: auto; border-top: 1px solid var(--rule); }
      .primary-nav ul { justify-content: space-between; min-width: 650px; padding: 0 20px; }
      .primary-nav a { padding: .9rem 0 .85rem; }
      .primary-nav a::after { bottom: .45rem; }
      .header-actions { grid-column: 2; grid-row: 1; }
      .search-drawer { top: 126px; }
      .hero { min-height: 650px; }
      .hero::before { background: linear-gradient(90deg, rgba(39,45,103,.98), rgba(39,45,103,.64) 72%, rgba(39,45,103,.18)), linear-gradient(0deg, rgba(30,48,92,.72), transparent 48%); }
      .hero-copy { width: min(650px, 88vw); }
      .worlds { grid-template-columns: 1fr; }
      .worlds .media-shell { min-height: 390px; }
      .worlds-copy { min-height: 290px; }
      .review { grid-template-columns: 1fr; }
      .review-copy { min-height: 370px; padding-right: 45%; }
      .review-media { min-height: 450px; }
      .review-score strong { font-size: 7rem; }
      .guides { grid-template-columns: 1fr; }
      .guides-media { margin-right: 24px; min-height: 400px; }
      .article-card:nth-child(odd) { --card-width: 55%; }
      .article-card:nth-child(even) { --card-width: 45%; }
    }

    @media (max-width: 620px) {
      .site-header { padding-inline: 16px; }
      .wordmark { font-size: 2.5rem; }
      .newsletter-button { display: none; }
      .hero { min-height: 690px; }
      .hero-copy { width: 100%; padding: 50px 22px 40px; }
      h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); }
      .deck { max-width: 92%; }
      .worlds .media-shell { min-height: 340px; }
      .worlds-copy::before { font-size: 5rem; }
      .review-copy { min-height: 400px; padding-right: 1.5rem; }
      .review-media { min-height: 400px; }
      .guide-columns { grid-template-columns: 1fr; }
      .guides-media { min-height: 330px; margin-left: 18px; margin-right: 18px; }
      .guides-copy { padding-inline: 1.3rem; }
      .guide-creature { width: 58%; }
      .news-list li { grid-template-columns: 4px 1fr; padding: .7rem 0; }
      .news-list time { grid-column: 2; }
      .feed-heading { display: block; }
      .feed-heading p { margin-top: .8rem; text-align: left; }
      .article-card,
      .article-card:nth-child(n) { --card-width: 100%; }
      .article-card p:not(.article-kicker):not(.article-meta) { min-height: 0; }
      .site-footer { grid-template-columns: 1fr; }
      .newsletter-form { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
  

/* WordPress integration */
.admin-bar .site-header { top: 32px; }
.admin-bar .search-drawer { margin-top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .search-drawer { margin-top: 46px; }
}
.site-header .custom-logo-link { display:flex; align-items:center; }
.site-header .custom-logo { max-height:58px; width:auto; }
.primary-nav .menu { display:flex; align-items:center; gap:clamp(1rem,3vw,3.75rem); margin:0; padding:0; list-style:none; }
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after,
.primary-nav .current-menu-ancestor > a::after { transform:scaleX(1); }
.cover-image { width:100%; height:100%; object-fit:cover; display:block; }
.hero-art .cover-image { position:absolute; inset:0; }
.media-bg .cover-image { position:absolute; inset:0; }
.article-image .cover-image { position:absolute; inset:0; }
.fallback-art { width:100%; height:100%; object-fit:cover; display:block; }
.post-category-list { display:flex; flex-wrap:wrap; gap:.45rem .75rem; margin:0 0 .8rem; padding:0; list-style:none; }
.post-category-list a { color:var(--cyan); font:750 .72rem/1 var(--display); letter-spacing:.17em; text-transform:uppercase; }

/* Generic archive/search pages */
.listing-page { min-height:60vh; padding:clamp(3rem,6vw,7rem) 0 5rem; background:linear-gradient(150deg,#4a6fa3,#65549b 48%,#31888e); }
.listing-header { margin:0 clamp(20px,3.5vw,68px) clamp(2rem,3vw,3.2rem); padding-bottom:1.1rem; border-bottom:1px solid rgba(255,255,255,.34); }
.listing-header .eyebrow { margin-bottom:.65rem; }
.listing-header h1 { max-width:1100px; margin:0; font-size:clamp(3.2rem,6vw,7rem); }
.listing-header p { max-width:760px; color:var(--paper-muted); line-height:1.55; margin:1rem 0 0; }
.pagination-wrap { padding:2.5rem clamp(20px,3.5vw,68px) 0; }
.pagination-wrap .nav-links { display:flex; flex-wrap:wrap; gap:.55rem; }
.pagination-wrap a,.pagination-wrap span { display:inline-grid; place-items:center; min-width:42px; min-height:42px; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.3); font:750 .78rem var(--display); }
.pagination-wrap .current { background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* Single article */
.single-story { background:linear-gradient(150deg,#4a6fa3,#65549b 48%,#31888e); min-height:70vh; }
.single-hero { position:relative; min-height:min(66vh,720px); display:flex; align-items:end; overflow:hidden; isolation:isolate; background:#424b91; }
.single-hero-media { position:absolute; inset:0; z-index:-2; }
.single-hero-media img { width:100%; height:100%; object-fit:cover; }
.single-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(30,35,86,.98),rgba(30,35,86,.18) 70%),linear-gradient(90deg,rgba(38,43,99,.75),transparent 68%); }
.single-hero-copy { width:min(1120px,94vw); padding:clamp(3rem,7vw,7rem) clamp(22px,4vw,72px) clamp(2.5rem,5vw,5rem); }
.single-hero h1 { max-width:980px; font-size:clamp(3rem,7vw,7.6rem); }
.single-deck { max-width:760px; font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.55; color:#f8f4ec; }
.story-content-wrap { display:grid; grid-template-columns:minmax(0,760px) minmax(220px,300px); gap:clamp(2rem,5vw,6rem); justify-content:center; padding:clamp(2.7rem,6vw,6rem) clamp(22px,4vw,72px); }
.entry-content { min-width:0; color:#fffaf1; font-size:1.08rem; line-height:1.78; }
.entry-content > * { max-width:100%; }
.entry-content h2,.entry-content h3,.entry-content h4 { font-family:var(--display); line-height:1.03; text-transform:uppercase; color:var(--paper); margin-top:2.3em; }
.entry-content h2 { font-size:clamp(2.2rem,4vw,4rem); border-bottom:3px solid var(--magenta); padding-bottom:.18em; }
.entry-content h3 { font-size:clamp(1.7rem,3vw,2.7rem); color:var(--cyan); }
.entry-content a { color:var(--lime); text-decoration:underline; text-underline-offset:.16em; }
.entry-content img { height:auto; max-width:100%; }
.entry-content figure { margin-inline:0; }
.entry-content blockquote { margin:2rem 0; padding:1.2rem 1.5rem; border-left:5px solid var(--violet); background:rgba(42,49,111,.35); font-size:1.2em; }
.story-sidebar { align-self:start; position:sticky; top:110px; padding:1.3rem; border:1px solid rgba(255,255,255,.22); background:rgba(42,49,111,.38); }
.story-sidebar h2 { font:750 1.15rem var(--display); letter-spacing:.13em; text-transform:uppercase; color:var(--cyan); }
.story-sidebar p,.story-sidebar li { color:var(--paper-muted); line-height:1.5; }
.story-sidebar ul { margin:0; padding-left:1.1rem; }
.author-box { margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.28); }
.post-tags { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.post-tags a { border:1px solid rgba(255,255,255,.3); padding:.45rem .7rem; text-decoration:none; font:700 .74rem var(--display); text-transform:uppercase; }
.post-navigation { margin-top:3rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.post-navigation a { display:block; padding:1rem; border:1px solid rgba(255,255,255,.24); text-decoration:none; }

/* Pages */
.page-shell { min-height:70vh; padding:clamp(3rem,7vw,7rem) clamp(22px,6vw,100px); background:linear-gradient(150deg,#4a6fa3,#65549b 48%,#31888e); }
.page-shell article { max-width:960px; margin:auto; }
.page-shell h1 { font-size:clamp(3.2rem,6vw,6.7rem); }
.page-shell .entry-content { max-width:820px; }

/* Comments */
.comments-area { max-width:760px; margin:0 auto; padding:0 clamp(22px,4vw,72px) 5rem; }
.comments-title,.comment-reply-title { font:750 2rem var(--display); text-transform:uppercase; }
.comment-list { list-style:none; padding:0; }
.comment-body { padding:1.2rem 0; border-bottom:1px solid rgba(255,255,255,.22); }
.comment-form input,.comment-form textarea { width:100%; padding:.8rem; border:1px solid var(--cyan); background:rgba(40,51,105,.68); color:white; }
.comment-form .submit { width:auto; border:0; background:linear-gradient(90deg,var(--yellow),var(--lime)); color:var(--ink); font-weight:800; cursor:pointer; }

/* Infinite feed */
.feed-sentinel { height:1px; }
.feed-status { min-height:2.5rem; margin:1.8rem 0 0; text-align:center; color:var(--cyan); font:700 .78rem/1 var(--display); letter-spacing:.16em; text-transform:uppercase; }
.feed-status[hidden] { display:none; }
.article-card.is-loading { opacity:.65; }

/* WordPress-generated media */
.wp-caption { max-width:100%; }
.wp-caption-text,.gallery-caption { color:var(--paper-muted); font-size:.9rem; }
.alignwide { margin-left:min(-8vw,-80px); margin-right:min(-8vw,-80px); max-width:none; }
.alignfull { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 900px) {
  .primary-nav .menu { min-width:650px; padding:0 20px; justify-content:space-between; }
  .story-content-wrap { grid-template-columns:1fr; }
  .story-sidebar { position:static; }
  .alignwide { margin-left:0; margin-right:0; }
}
@media (max-width:620px) {
  .post-navigation { grid-template-columns:1fr; }
  .single-hero { min-height:560px; }
}

/* ============================================================
   Wildsave 1.1 — chronological feature slots + two-image system
   ============================================================ */
.hero-copy { position:relative; z-index:4; }
.hero-art { z-index:-3; }
.hero::before { z-index:-2; }
.hero-feature-art {
  position:absolute;
  z-index:1;
  right:clamp(18px,4vw,76px);
  bottom:0;
  width:auto;
  height:min(94%, 720px);
  max-width:min(58vw, 920px);
  object-fit:contain;
  object-position:right bottom;
  pointer-events:none;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.48)) drop-shadow(0 0 6px rgba(50,231,255,.4));
}

/* Hero Art is always contained. Background art is the image that crops/fills. */
.popout,
.single-hero-art { object-fit:contain; }
.worlds-creature { max-height:calc(100% + 10px); }
.guide-creature { max-height:calc(100% + 24px); }
.review-heroine { object-fit:contain; object-position:right bottom; }

/* When the third chronological feature has no score, keep its copy balanced. */
.review-copy .story-summary:first-of-type { margin-top:.8rem; }
.news-empty { grid-template-columns:5px 1fr !important; }
.news-empty span { color:var(--paper-muted); }

/* True image-backed, variable-size masonry-style feed. JS calculates row spans. */
.article-grid {
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  grid-auto-rows:8px;
  grid-auto-flow:dense;
  width:100%;
  gap:0;
  align-items:start;
}
.article-card,
.article-card:nth-child(n) {
  --card-accent:var(--cyan);
  --card-width:auto;
  position:relative;
  display:block;
  flex:none;
  min-width:0;
  width:auto;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  transform:none;
  transition:none;
  grid-column:span 6;
}
.article-card:nth-child(6n + 1) { grid-column:span 7; --card-accent:var(--cyan); }
.article-card:nth-child(6n + 2) { grid-column:span 5; --card-accent:var(--magenta); }
.article-card:nth-child(6n + 3) { grid-column:span 5; --card-accent:var(--lime); }
.article-card:nth-child(6n + 4) { grid-column:span 7; --card-accent:var(--violet); }
.article-card:nth-child(6n + 5) { grid-column:span 6; --card-accent:var(--orange); }
.article-card:nth-child(6n + 6) { grid-column:span 6; --card-accent:var(--green); }
.article-card:hover,
.article-card:focus-within { transform:none; border-color:transparent; }
.article-card-inner {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:390px;
  overflow:hidden;
  background-color:#465692;
  background-image:var(--card-image);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 14px 34px rgba(43,47,104,.22);
  transition:transform .2s ease, border-color .2s ease, filter .2s ease;
}
.article-card:nth-child(6n + 1) .article-card-inner { min-height:520px; }
.article-card:nth-child(6n + 2) .article-card-inner { min-height:390px; }
.article-card:nth-child(6n + 3) .article-card-inner { min-height:455px; }
.article-card:nth-child(6n + 4) .article-card-inner { min-height:575px; }
.article-card:nth-child(6n + 5) .article-card-inner { min-height:430px; }
.article-card:nth-child(6n + 6) .article-card-inner { min-height:500px; }
.article-card-inner::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    linear-gradient(180deg, rgba(23,27,70,.02) 0%, rgba(29,34,82,.18) 32%, rgba(28,33,79,.94) 100%),
    linear-gradient(90deg, rgba(30,38,91,.58), transparent 65%);
  pointer-events:none;
}
.article-card-inner::after {
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:var(--card-accent);
  pointer-events:none;
}
.article-card:hover .article-card-inner,
.article-card:focus-within .article-card-inner {
  transform:translateY(-3px);
  border-color:var(--card-accent);
  filter:saturate(1.08) brightness(1.03);
}
.article-card-hit {
  position:absolute;
  z-index:1;
  inset:0;
}
.article-card .article-body {
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
  padding:clamp(1.2rem,2.2vw,2.15rem);
  background:transparent;
  pointer-events:none;
  text-shadow:0 2px 8px rgba(12,14,45,.9), 0 1px 2px rgba(0,0,0,.85);
}
.article-card .article-body a { position:relative; z-index:3; pointer-events:auto; }
.article-card .article-kicker {
  margin-bottom:.7rem;
  color:var(--card-accent);
  font-size:.76rem;
  text-shadow:0 2px 6px rgba(0,0,0,.95);
}
.article-card h3 {
  max-width:880px;
  margin-bottom:.7rem;
  font-size:clamp(1.75rem,2.55vw,3.25rem);
  line-height:.98;
  text-shadow:0 3px 11px rgba(0,0,0,.95);
}
.article-card p:not(.article-kicker):not(.article-meta) {
  min-height:0;
  max-width:680px;
  margin-bottom:1rem;
  color:#fffaf1;
  line-height:1.48;
  font-weight:550;
}
.article-card .article-meta {
  color:#fff;
  text-shadow:0 2px 7px rgba(0,0,0,.95);
}

/* Individual articles use the same Featured Image + optional Hero Art model. */
.single-hero-copy { position:relative; z-index:3; }
.single-hero::after { z-index:1; }
.single-hero-media { z-index:0; }
.single-hero-art {
  position:absolute;
  z-index:2;
  right:clamp(14px,4vw,70px);
  bottom:0;
  width:auto;
  height:min(92%, 700px);
  max-width:min(55vw, 900px);
  object-position:right bottom;
  pointer-events:none;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5)) drop-shadow(0 0 5px rgba(50,231,255,.35));
}

@media (max-width: 900px) {
  .hero-feature-art { right:-2vw; height:min(78%,620px); max-width:58vw; opacity:.92; }
  .article-card,
  .article-card:nth-child(n) { grid-column:span 6; }
  .article-card:nth-child(4n + 1) .article-card-inner { min-height:470px; }
  .article-card:nth-child(4n + 2) .article-card-inner { min-height:380px; }
  .article-card:nth-child(4n + 3) .article-card-inner { min-height:430px; }
  .article-card:nth-child(4n + 4) .article-card-inner { min-height:510px; }
  .single-hero-art { right:-3vw; max-width:60vw; height:min(78%,600px); opacity:.92; }
}

@media (max-width: 620px) {
  .hero-feature-art { right:-15%; height:min(60%,440px); max-width:72vw; opacity:.72; }
  .hero-copy { width:100%; }
  .article-grid { grid-template-columns:1fr; grid-auto-rows:8px; }
  .article-card,
  .article-card:nth-child(n) { grid-column:1 / -1; }
  .article-card:nth-child(n) .article-card-inner { min-height:clamp(360px,112vw,510px); }
  .article-card h3 { font-size:clamp(2rem,9vw,3rem); }
  .single-hero-art { right:-18%; max-width:78vw; height:min(58%,430px); opacity:.72; }
}