/* Evergreen guides, blog, contact, and Black Room landing pages. */
html { overflow-x: hidden; }
.content-page { overflow-x: hidden; background: #0b0b0b; }
.content-page main { padding-top: 74px; }
.content-page .nav-links a.active { color: var(--neon); }

.content-hero {
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(800px 520px at 15% 35%, rgba(57,255,20,.08), transparent 65%);
}
.content-hero > * { min-width: 0; }
.content-hero-copy { padding: clamp(5rem, 10vw, 9rem) var(--pad) 5rem; align-self: center; }
.content-hero h1 {
  max-width: 900px;
  margin: 1.1rem 0 1.4rem;
  font: 900 clamp(2.7rem, 6.4vw, 6.8rem)/.9 var(--disp);
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.content-dek { max-width: 760px; color: #d1d1d1; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.65; }
.content-byline { margin-top: 1.1rem; color: var(--gray); font: 600 .72rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.content-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.content-hero figure { min-height: 560px; overflow: hidden; border-left: 1px solid var(--line); }
.content-hero figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.08); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; color: #8a8a8a; font: 600 .68rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.breadcrumbs > * { min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs a:hover { color: var(--neon); }

.content-article { max-width: 940px; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--pad); }
.content-article > p, .content-article li { color: #d2d2d2; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.85; }
.content-article > p { margin: 0 0 1.35rem; }
.content-article h2 { margin: 4rem 0 1.15rem; font: 900 clamp(2rem, 4vw, 3.6rem)/1 var(--disp); letter-spacing: -.035em; text-transform: uppercase; }
.content-article h3 { margin: 2.4rem 0 .8rem; font: 800 clamp(1.2rem, 2vw, 1.6rem)/1.15 var(--sans); }
.content-article ul, .content-article ol { display: grid; gap: .7rem; margin: 1.2rem 0 1.8rem 1.3rem; }
.content-article a { color: var(--neon); text-decoration: underline; text-underline-offset: .22em; }
.content-article strong { color: #fff; }
.content-article .lede { padding-left: 1.3rem; border-left: 3px solid var(--neon); color: #fff; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.quick-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 2.5rem 0; background: var(--line); border: 1px solid var(--line); }
.quick-facts > div { padding: 1.35rem; background: #121212; }
.quick-facts b { display: block; margin-bottom: .4rem; color: var(--neon); font: 700 .68rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.quick-facts span { color: #fff; line-height: 1.45; }
.callout { margin: 2.2rem 0; padding: 1.5rem; background: rgba(57,255,20,.06); border: 1px solid rgba(57,255,20,.35); }
.callout p:last-child { margin-bottom: 0; }
.source-note { font-size: .9rem !important; color: #a5a5a5 !important; }

.faq { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.faq h2 { margin-top: .8rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 1.2rem 2.3rem 1.2rem 0; cursor: pointer; color: #fff; font-weight: 800; line-height: 1.45; }
.faq details p { padding: 0 0 1.35rem; color: #bbb; line-height: 1.75; }
.responsible { margin-top: 3rem; padding: 1.5rem; border: 1px solid #6b5920; background: rgba(255,205,54,.05); }
.responsible strong { display: block; color: #ffd85c; }
.responsible p { margin-top: .45rem; color: #c9c9c9; line-height: 1.7; }

.content-cta { padding: clamp(4rem, 8vw, 7rem) var(--pad); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(800px 420px at 50% 50%, rgba(57,255,20,.08), transparent 70%); }
.content-cta h2 { margin: .8rem 0 1rem; font: 900 clamp(2.4rem, 5vw, 5rem)/.95 var(--disp); text-transform: uppercase; }
.content-cta > p:not(.mono-label) { color: #bdbdbd; line-height: 1.65; }
.content-cta > div { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.blog-hero { min-height: 66vh; padding: clamp(8rem, 15vw, 13rem) var(--pad) 5rem; background: radial-gradient(900px 600px at 70% 20%, rgba(57,255,20,.12), transparent 65%), url("../assets/smoke_drift.jpg") center/cover; background-blend-mode: screen; border-bottom: 1px solid var(--line); }
.blog-hero h1 { margin: 1rem 0; font: 900 clamp(3.2rem, 9vw, 9rem)/.78 var(--disp); letter-spacing: -.065em; }
.blog-hero h1 span { color: transparent; -webkit-text-stroke: 1px var(--neon); }
.blog-hero > p:last-child { max-width: 690px; color: #d0d0d0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.65; }
.blog-grid { max-width: 1260px; margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) var(--pad); display: grid; gap: 1px; background: var(--line); }
.blog-card { background: #0f0f0f; }
.blog-card > a { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); min-height: 360px; }
.blog-card figure { overflow: hidden; }
.blog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .4s; }
.blog-card div { padding: clamp(1.8rem, 4vw, 3.5rem); align-self: center; }
.blog-card h2 { margin: .75rem 0 1rem; font: 900 clamp(1.8rem, 3.7vw, 3.5rem)/.98 var(--disp); text-transform: uppercase; letter-spacing: -.035em; }
.blog-card p:not(.mono-label) { color: #b9b9b9; line-height: 1.7; }
.blog-card span { display: inline-block; margin-top: 1.4rem; color: var(--neon); font: 700 .72rem/1.2 var(--mono); letter-spacing: .14em; }
.blog-card a:hover img { transform: scale(1.035); filter: saturate(1.1); }

.content-footer { padding: 3.5rem var(--pad); display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 2rem; color: #9f9f9f; font-size: .82rem; line-height: 1.65; }
.content-footer img { width: 170px; margin-bottom: .7rem; }
.content-footer nav { display: grid; align-content: start; gap: .35rem; }
.content-footer a:hover { color: var(--neon); }
.content-footer small { grid-column: 1/-1; padding-top: 1.3rem; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .content-page main { padding-top: 108px; }
  .content-hero { grid-template-columns: 1fr; }
  .content-hero figure { min-height: 48vh; border-left: 0; border-top: 1px solid var(--line); order: -1; }
  .content-hero-copy { padding-top: 3.5rem; }
  .quick-facts { grid-template-columns: 1fr; }
  .blog-card > a { grid-template-columns: 1fr; }
  .blog-card figure { height: 280px; }
  .content-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .content-page main { padding-top: 100px; }
  .content-hero h1 { font-size: 2.65rem; }
  .content-hero figure { min-height: 330px; }
  .content-actions .btn, .content-cta .btn { width: 100%; text-align: center; }
  .blog-hero { min-height: 520px; }
  .blog-hero h1 { font-size: 3.2rem; }
  .content-footer { grid-template-columns: 1fr; }
  .content-footer small { grid-column: 1; }
}