.guide-page {
  background:
    radial-gradient(circle at 18% 14%, rgba(96,48,78,.13), transparent 28rem),
    var(--bg);
}

.guide-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + 6rem) 0 5rem;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(90deg, rgba(6,9,14,.96), rgba(6,9,14,.76)), var(--bg-soft);
}

.guide-hero__inner { position: relative; z-index: 1; }
.guide-back { display:inline-block; margin-bottom:3rem; color:var(--text-soft); font-size:.82rem; font-weight:700; text-decoration:none; }
.guide-back:hover { color:var(--gold-bright); }
.guide-hero h1 { margin-bottom:1.25rem; max-width:900px; font-size:clamp(3.2rem,7vw,6.2rem); }
.guide-hero__lead { max-width:760px; margin-bottom:2rem; font-size:clamp(1.05rem,2vw,1.25rem); }


.guide-hero {
    position: relative;
    display: grid;
    min-height: 72svh;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--border-soft);
}

.guide-hero__media-conductor {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 13, 0.94) 0%,
            rgba(5, 8, 13, 0.66) 46%,
            rgba(5, 8, 13, 0.18) 75%,
            rgba(5, 8, 13, 0.42) 100%
        ),
        linear-gradient(
            0deg,
            var(--bg) 0%,
            transparent 28%
        ),
        url("/assets/images/charge.gif")
        right -80px top -430px / 60% auto no-repeat;
}

.guide-hero__media-conductor::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            var(--bg) 34%,
            rgba(9, 13, 20, 0.85) 43%,
            rgba(9, 13, 20, 0.35) 53%,
            transparent 64%
        );
}


.guide-hero__media-thornax {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 13, 0.94) 0%,
            rgba(5, 8, 13, 0.66) 46%,
            rgba(5, 8, 13, 0.18) 75%,
            rgba(5, 8, 13, 0.42) 100%
        ),
        linear-gradient(
            0deg,
            var(--bg) 0%,
            transparent 28%
        ),
        url("/assets/images/TongueLash.gif")
        right -80px top -430px / 60% auto no-repeat;
}

.guide-hero__media-thornax::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            var(--bg) 34%,
            rgba(9, 13, 20, 0.85) 43%,
            rgba(9, 13, 20, 0.35) 53%,
            transparent 64%
        );
}


.guide-hero__media-totem {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;

    background:
        linear-gradient(
            0deg,
            var(--bg) 0%,
            transparent 28%
        ),
        url("/assets/images/totem-header.jpg")
        right top / 50% auto no-repeat;
}

.guide-hero__media-totem::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        var(--bg) 0%,
        var(--bg) 48%,
        rgba(9, 13, 20, 0.96) 53%,
        rgba(9, 13, 20, 0.82) 59%,
        rgba(9, 13, 20, 0.58) 66%,
        rgba(9, 13, 20, 0.28) 74%,
        transparent 84%
    );
}

.guide-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-height) + 3rem);
    padding-bottom: 5rem;
}

.guide-hero__content {
    max-width: 700px;
}

.guide-hero h1 {
    margin-bottom: 1rem;
    font-size: clamp(4rem, 9vw, 8rem);
}


.guide-warning {
  display:inline-flex;
  flex-wrap:wrap;
  gap:.35rem 1rem;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(216,197,116,.05);
}
.guide-warning strong { color:var(--gold-bright); font-size:.8rem; }
.guide-warning span { color:var(--muted); font-size:.8rem; }

.guide-section { padding-top:5rem; }
.guide-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:4rem; align-items:start; }
.guide-main { min-width:0; }
.guide-block { padding:0 0 4.5rem; }
.guide-block + .guide-block { padding-top:4.5rem; border-top:1px solid var(--border-soft); }
.guide-block h2 { max-width:800px; font-size:clamp(2rem,4vw,3.5rem); }
.guide-block > p { max-width:820px; }

.guide-kicker {
  margin-bottom:.65rem;
  color:var(--gold);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.guide-reveal {
  margin-top:1rem;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.guide-reveal summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.15rem 1.25rem;
  cursor:pointer;
  color:var(--text);
  list-style:none;
}
.guide-reveal summary::-webkit-details-marker { display:none; }

.guide-reveal summary span:first-child {
  display:grid;
  gap:.18rem;
  font-family:"Cinzel", Georgia, serif;
  font-size:1rem;
  font-weight:700;
}
.guide-reveal summary small {
  color:var(--gold);
  font-family:"Inter", sans-serif;
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.guide-reveal__icon { flex:0 0 auto; color:var(--gold); font-size:1.25rem; transition:transform 180ms ease; }
.guide-reveal[open] > summary .guide-reveal__icon { transform:rotate(45deg); }
.guide-reveal__content { padding:0 1.25rem 1.35rem; }
.guide-reveal__content p:last-child, .guide-reveal__content ul:last-child { margin-bottom:0; }
.guide-reveal__content li { margin-bottom:.65rem; color:var(--text-soft); }

.guide-reveal--strong { border-color:rgba(216,197,116,.26); background:rgba(216,197,116,.035); }
.guide-reveal--solution { border-color:rgba(185,64,63,.36); background:rgba(185,64,63,.05); }
.guide-reveal--solution summary small { color:#e77e75; }

.solution-sequence { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; margin:1.4rem 0; }
.solution-sequence span {
  padding:.65rem .9rem;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--gold-bright);
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
}
.solution-sequence b { color:var(--muted); }

.verification-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.verification-grid article {
  padding:1.25rem;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.verification-grid h3 { margin-bottom:.5rem; font-size:1rem; }
.verification-grid p { margin-bottom:0; font-size:.88rem; }

.guide-block--danger {
  padding:2rem;
  border:1px solid rgba(185,64,63,.28)!important;
  border-radius:16px;
  background:rgba(185,64,63,.045);
}
.report-list { display:grid; gap:.8rem; margin:1.5rem 0 2rem; padding-left:1.25rem; }
.report-list li { color:var(--text-soft); }

.guide-sidebar {
  position:sticky;
  top:calc(var(--header-height) + 2rem);
  display:grid;
  gap:1.25rem;
}
.guide-sidebar__panel {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-elevated);
  box-shadow:var(--shadow);
}
.guide-sidebar__panel img { width:100%; aspect-ratio:16/11; object-fit:cover; }
.guide-image-fallback {
  display:none;
  place-items:center;
  min-height:220px;
  padding:2rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}
.guide-sidebar__panel--text { padding:1.4rem; }
.guide-sidebar__panel--text h2 { margin-bottom:1rem; font-size:1.15rem; }
.guide-facts { margin:0; }
.guide-facts div { display:grid; gap:.2rem; padding:.85rem 0; border-top:1px solid var(--border-soft); }
.guide-facts dt { color:var(--gold); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.guide-facts dd { margin:0; color:var(--text-soft); font-size:.84rem; }

@media (max-width:980px) {
  .guide-layout { grid-template-columns:1fr; }
  .guide-sidebar { position:static; grid-row:1; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); }
}

@media (max-width:680px) {
  .guide-hero { padding-top:calc(var(--header-height) + 4rem); }
  .guide-sidebar { grid-template-columns:1fr; }
  .verification-grid { grid-template-columns:1fr; }
  .guide-block { padding-bottom:3rem; }
  .guide-block + .guide-block { padding-top:3rem; }
  .guide-block--danger { padding:1.35rem; }
}