:root {
  --rg-line:        rgba(201, 125, 24, 0.2);
  --rg-line-strong: rgba(201, 125, 24, 0.36);
  --rg-text:        #f5e8c4;
  --rg-muted:       #8a7d6e;
  --rg-copy:        #c8baa8;
  --rg-accent:      #c97d18;
  --rg-accent-2:    #2ab5b5;
  --rg-gold:        #e8c060;
}

body.rp-guides-active #root main,
body.rp-guides-active #root .site-footer {
  display: none !important;
}

#rp-guides-root {
  position: fixed;
  top: var(--rp-guides-header-h, 96px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: none;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(201, 125, 24, 0.12), transparent 28rem),
    radial-gradient(ellipse at 82% 0%, rgba(42, 181, 181, 0.08), transparent 22rem),
    linear-gradient(180deg, #100c07 0%, #090704 52%, #050403 100%);
  color: var(--rg-copy);
}

body.rp-guides-active #rp-guides-root {
  display: block;
}

/* The guides root is position:fixed at z-index 90 and covers the viewport below
   the header. The nav dropdown panels hang down into that region, so keep the
   nav (and its open dropdowns) painted ABOVE the guides layer. .nav-shell is
   sticky z-index:100; we lift it well clear so its dropdowns never underlap. */
body.rp-guides-active .nav-shell {
  z-index: 1000;
}

/* #rp-guides-root is position:fixed and scrolls internally. Lock the page
   behind it so it does not produce a second (outer) scrollbar. */
body.rp-guides-active,
html:has(body.rp-guides-active) {
  overflow: hidden !important;
}

/* CLIP TRAP: with html ALSO overflow:hidden, body's overflow no longer
   propagates to the viewport, so body clips its descendants to its own box.
   With main display:none that box is only the header's height (~140px), which
   chopped open nav dropdowns at the header's bottom edge. Keep the clip box
   at full viewport height so dropdowns stay visible. */
body.rp-guides-active {
  min-height: 100vh;
}

.rg-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.rg-wrap.narrow {
  max-width: 800px;
}

/* ── Listing hero ── */

.rg-page-hero {
  margin-bottom: 40px;
  text-align: center;
}

.rg-page-hero .rg-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border: 1px solid rgba(42, 181, 181, 0.4);
  border-radius: 99px;
  background: rgba(42, 181, 181, 0.1);
  color: var(--rg-accent-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rg-page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #f5e8c4;
  text-shadow: 0 3px 0 rgba(0,0,0,0.7), 0 0 36px rgba(201,125,24,0.16);
}

/* Animated "RunePort" word in the guides title */
.rg-title {
  display: inline-block;
}

.rg-title-brand {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  color: #ffd47a;
  background: linear-gradient(
    100deg,
    #e8b85a 0%,
    #fff1c4 28%,
    #ffd47a 48%,
    #e8b85a 70%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: rgTitleShimmer 5.5s ease-in-out infinite;
}

.rg-title-underline {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 0.34em;
  overflow: visible;
  color: #f0b94e;
  filter: drop-shadow(0 0 4px rgba(240, 185, 78, 0.55));
  animation: rgTitleGlow 4s ease-in-out 2s infinite;
}

/* The path is ~360 units long; draw it in once on load. The dash animation
   must live on the path itself (the element that carries the stroke). */
.rg-title-underline path {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: rgTitleDraw 1.5s ease-out 0.25s forwards;
}

@keyframes rgTitleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rgTitleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes rgTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240, 185, 78, 0.45)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 220, 130, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
  .rg-title-brand { animation: none; }
  .rg-title-underline { animation: none; }
  .rg-title-underline path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.rg-page-hero p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--rg-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ── Guide cards ── */

.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}

.rg-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(201, 125, 24, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(201,125,24,0.08), transparent 12rem),
    linear-gradient(180deg, rgba(20,14,8,0.96), rgba(10,7,4,0.98));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(0,0,0,0.42), inset 0 1px rgba(255,255,255,0.04);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rg-card:hover {
  border-color: rgba(201, 125, 24, 0.52);
  transform: translateY(-3px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.52),
    0 0 24px rgba(201,125,24,0.14),
    inset 0 1px rgba(255,255,255,0.05);
}

.rg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 125, 24, 0.3);
  background: rgba(201, 125, 24, 0.1);
  font-size: 20px;
}

.rg-card h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #f5e8c4;
}

.rg-card p {
  flex: 1;
  margin: 0 0 16px;
  color: var(--rg-copy);
  font-size: 14px;
  line-height: 1.6;
}

.rg-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 125, 24, 0.16);
  color: var(--rg-muted);
  font-size: 12px;
}

.rg-card-arrow {
  margin-left: auto;
  color: var(--rg-gold);
  font-size: 16px;
  transition: transform 0.2s ease;
}

.rg-card:hover .rg-card-arrow {
  transform: translateX(4px);
}

.rg-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--rg-muted);
  font-size: 15px;
}

.rg-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--rg-text);
  font-size: 18px;
}

/* ── Detail page ── */

.rg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  padding: 6px 14px;
  border: 1px solid rgba(201, 125, 24, 0.32);
  border-radius: 7px;
  background: rgba(8, 5, 2, 0.62);
  color: var(--rg-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rg-back-link:hover {
  border-color: rgba(201, 125, 24, 0.62);
  color: #f5c84a;
  background: rgba(14, 9, 3, 0.84);
}

.rg-article-hero {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(201, 125, 24, 0.18);
}

.rg-article-hero .rg-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--rg-accent-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rg-article-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #f5e8c4;
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 28px rgba(201,125,24,0.12);
}

.rg-article-hero .rg-excerpt {
  color: var(--rg-copy);
  font-size: 16px;
  line-height: 1.65;
}

.rg-article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  color: var(--rg-muted);
  font-size: 13px;
}

.rg-article-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Rich content ── */

.rg-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--rg-copy);
}

.rg-content h2 {
  margin: 2em 0 0.6em;
  font-size: 22px;
  font-weight: 800;
  color: #f5e8c4;
  letter-spacing: -0.01em;
  text-shadow: 0 0 22px rgba(201,125,24,0.1);
}

.rg-content h3 {
  margin: 1.6em 0 0.5em;
  font-size: 18px;
  font-weight: 700;
  color: #f5e8c4;
}

.rg-content h4 {
  margin: 1.4em 0 0.4em;
  font-size: 15px;
  font-weight: 700;
  color: var(--rg-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rg-content p { margin: 0 0 1.2em; }

.rg-content a {
  color: var(--rg-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rg-content a:hover { color: #f5e8c4; }

.rg-content strong { color: #f5e8c4; }

.rg-content em { color: var(--rg-copy); }

.rg-content ul,
.rg-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.6em;
}

.rg-content li { margin-bottom: 0.4em; }

.rg-content code {
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(42, 181, 181, 0.22);
  background: rgba(42, 181, 181, 0.08);
  color: #7ee8e8;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
}

.rg-content pre,
.rg-content .code-block {
  overflow-x: auto;
  margin: 1.2em 0;
  padding: 18px 20px;
  border: 1px solid rgba(42, 181, 181, 0.2);
  border-radius: 12px;
  background: rgba(3, 5, 10, 0.88);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #a8dede;
}

.rg-content pre code,
.rg-content .code-block code {
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
}

.rg-content blockquote,
.rg-content .rg-quote {
  margin: 1.4em 0;
  padding: 14px 18px;
  border-left: 3px solid rgba(201, 125, 24, 0.6);
  border-radius: 0 10px 10px 0;
  background: rgba(201, 125, 24, 0.06);
  color: var(--rg-copy);
  font-style: italic;
}

.rg-content hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid rgba(201, 125, 24, 0.22);
}

.rg-content .rg-note {
  margin: 1.4em 0;
  padding: 14px 18px;
  border: 1px solid rgba(42, 181, 181, 0.3);
  border-radius: 10px;
  background: rgba(42, 181, 181, 0.07);
  color: #7ee8e8;
  font-size: 14px;
}

.rg-content .rg-warn {
  margin: 1.4em 0;
  padding: 14px 18px;
  border: 1px solid rgba(232, 146, 10, 0.36);
  border-radius: 10px;
  background: rgba(232, 146, 10, 0.08);
  color: #f5c84a;
  font-size: 14px;
}

.rg-content img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(201, 125, 24, 0.16);
  margin: 1em 0;
}

.rg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
}

.rg-content th {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201, 125, 24, 0.28);
  background: rgba(201, 125, 24, 0.08);
  color: #f5e8c4;
  font-weight: 700;
  text-align: left;
}

.rg-content td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201, 125, 24, 0.12);
  color: var(--rg-copy);
}

/* ── Loading / error ── */

.rg-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--rg-muted);
  font-size: 14px;
  gap: 10px;
}

.rg-spinner::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(201, 125, 24, 0.24);
  border-top-color: var(--rg-accent);
  border-radius: 50%;
  animation: rg-spin 0.7s linear infinite;
}

@keyframes rg-spin { to { transform: rotate(360deg); } }

.rg-error {
  margin: 40px 0;
  padding: 20px;
  border: 1px solid rgba(232, 146, 10, 0.32);
  border-radius: 12px;
  background: rgba(232, 146, 10, 0.07);
  color: #f5c84a;
  text-align: center;
  font-size: 14px;
}

/* ── Guide detail 3-column layout with side ads ── */

.rg-detail-outer {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.rg-detail-outer .rg-wrap.narrow {
  flex: 1;
  min-width: 0;
}

.rg-ad-col {
  flex: 0 0 250px;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  /* Sticky column that stays in view as you read. It is tall enough for all
     three 250px boxes (3*250 + 2*16 gaps = 782px) so they are all visible at
     the top and stay fixed in place beside the article. */
  position: sticky;
  top: calc(var(--rp-guides-header-h, 96px) + 16px);
  align-self: flex-start;
}

/* Hide ad columns below 1300px so content isn't squeezed */
@media (max-width: 1300px) {
  .rg-detail-outer {
    display: block;
    padding: 0;
  }
  .rg-ad-col { display: none; }
}

/* ── Square ad slots ── */

.rg-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  flex: 0 0 250px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
}

.rg-ad-slot-filled {
  background: rgba(8,5,2,0.6);
  border: 1px solid rgba(201,125,24,0.18);
}

.rg-ad-slot-filled img,
.rg-ad-slot-filled video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rg-ad-slot-empty {
  border: 1px dashed rgba(201,125,24,0.28);
  background: rgba(201,125,24,0.04);
  color: var(--rg-muted);
  font-size: 13px;
  gap: 4px;
  transition: border-color .15s, background .15s, color .15s;
}

.rg-ad-slot-empty:hover {
  border-color: rgba(201,125,24,0.52);
  background: rgba(201,125,24,0.08);
  color: var(--rg-gold);
}

.rg-ad-slot-empty small {
  font-size: 11px;
  color: var(--rg-muted);
}

@media (max-width: 640px) {
  .rg-wrap { padding: 24px 16px 60px; }
  .rg-grid { grid-template-columns: 1fr; }
}