/* content.css — SEO article pages (channel 1). Inherits the brand palette from
   style.css (:root vars). Long-form, readable layout on the dark/gold ground. */

body.doc {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.7;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.doc__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem clamp(1rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 6, 13, 0.82); backdrop-filter: blur(10px);
}
.doc__brand {
  font-weight: 600; letter-spacing: 0.02em; color: var(--gold-soft);
  text-decoration: none; font-size: 1.05rem;
}
.doc__nav a {
  color: var(--ink-dim); text-decoration: none; margin-left: 1.2rem;
  font-size: 0.92rem; transition: color 0.2s ease;
}
.doc__nav a:hover { color: var(--gold-soft); }

.doc__main {
  max-width: 1100px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .doc__main { grid-template-columns: 1fr; } }

.crumb { font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 1.4rem; }
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--gold-soft); }
.crumb__sep { opacity: 0.5; margin: 0 0.15rem; }
.crumb [aria-current] { color: var(--gold-soft); }

.doc__art { min-width: 0; }
.doc__eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
  color: var(--ink-dim); margin: 0 0 0.5rem;
}
.doc__art h1 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0 0 1rem; color: var(--ink);
}
.doc__lede {
  font-size: clamp(1.08rem, 2.4vw, 1.25rem); color: var(--gold-soft);
  line-height: 1.6; margin: 0 0 2.2rem; max-width: 40ch;
}
.doc__art h1 + .doc__lede { max-width: none; }

.doc__sec { margin: 2.2rem 0; }
.doc__sec h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 0.7rem; color: var(--gold-soft);
}
.doc__sec p { margin: 0 0 1rem; color: var(--ink); }
.doc__sec p:last-child { margin-bottom: 0; }

.doc__cta {
  margin: 2.6rem 0; padding: 1.8rem; border-radius: 16px;
  background: linear-gradient(160deg, rgba(109, 91, 208, 0.16), rgba(232, 198, 106, 0.07));
  border: 1px solid var(--line); text-align: center;
}
.doc__cta h2 { color: var(--ink); margin: 0 0 0.6rem; }
.doc__cta p { color: var(--ink-dim); margin: 0 0 1.3rem; }
.doc__cta-btn {
  display: inline-block; padding: 0.85rem 1.8rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #120c02;
  font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.doc__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(232, 198, 106, 0.25); }

.doc__faq .faq__item {
  border-bottom: 1px solid var(--line); padding: 0.5rem 0;
}
.doc__faq summary {
  cursor: pointer; font-weight: 500; color: var(--ink); padding: 0.6rem 0;
  list-style: none; position: relative; padding-right: 1.6rem;
}
.doc__faq summary::-webkit-details-marker { display: none; }
.doc__faq summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 0.55rem;
  color: var(--gold-soft); font-size: 1.2rem; transition: transform 0.2s ease;
}
.doc__faq details[open] summary::after { transform: rotate(45deg); }
.doc__faq .faq__a { color: var(--ink-dim); padding: 0 0 0.8rem; }
.doc__faq .faq__a p { margin: 0; color: var(--ink-dim); }

/* Related / hub cards */
.rel { position: sticky; top: 88px; }
@media (max-width: 860px) { .rel { position: static; } }
.rel__title, .rel__all { font-size: 0.95rem; }
.rel__title { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; margin: 0 0 1rem; }
.rel__grid { display: grid; gap: 0.6rem; }
.rel__card {
  display: flex; align-items: baseline; gap: 0.7rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 12px; text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rel__card:hover { border-color: rgba(232,198,106,0.5); background: rgba(232,198,106,0.05); }
.rel__num { font-family: var(--font-display); font-weight: 600; color: var(--gold-soft); font-size: 1.1rem; }
.rel__tag { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.3; }
.rel__all { display: inline-block; margin-top: 1rem; color: var(--gold-soft); text-decoration: none; }
.rel__all:hover { text-decoration: underline; }

/* Hub grid */
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.hub__card {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem;
  border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.hub__card:hover { border-color: rgba(232,198,106,0.5); transform: translateY(-2px); background: rgba(232,198,106,0.05); }
.hub__num { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--gold-soft); }
.hub__tag { color: var(--ink-dim); font-size: 0.85rem; line-height: 1.35; }

/* Footer */
.doc__foot {
  margin-top: 3rem; padding: 2rem clamp(1rem, 5vw, 3rem); border-top: 1px solid var(--line);
  text-align: center;
}
.doc__foot-nav a { color: var(--ink-dim); text-decoration: none; margin: 0 0.7rem; font-size: 0.9rem; }
.doc__foot-nav a:hover { color: var(--gold-soft); }
.doc__disclaimer { color: var(--ink-dim); font-size: 0.82rem; margin: 1rem auto 0; max-width: 46ch; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .doc__cta-btn, .hub__card, .rel__card { transition: none; }
}