/* ============================================================
   VFXMAGIC — Field Guide article addon
   Loaded AFTER site.css on /learn/ article pages and learn.html.
   Ports the reading styles from the standalone Field Guide
   (vfxmagic-learn/assets/site.css) into the flythrough system.
   Tokens come from site.css; nothing here redefines them.
   Collision-safe: `.art-more` (not `.more`, which credit cards use).
   ============================================================ */

/* byline under an article hero lede (inside the animated page-hero band) */
.page-hero .byline{
  margin-top:26px;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--steel);
}

/* ---------- PROSE (article body) ---------- */
.article-body{padding:clamp(56px,8vw,96px) clamp(20px,5vw,44px)}
.prose{max-width:680px;margin:0 auto}
.prose p{color:var(--moon-dim);font-size:1.08rem;line-height:1.8;margin-bottom:26px}
.prose p:last-child{margin-bottom:0}
.prose p em{font-style:italic;color:var(--moon)}
.prose h2{
  font-family:var(--display);font-weight:400;color:var(--moon);
  font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.2;letter-spacing:-.01em;
  margin:52px 0 22px;
}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 26px;padding:0;list-style:none}
.prose ul li{
  position:relative;padding-left:26px;margin-bottom:16px;
  color:var(--moon-dim);font-size:1.06rem;line-height:1.7;
}
.prose ul li::before{
  content:'';position:absolute;left:2px;top:.72em;
  width:9px;height:1px;background:var(--glacial);
}
.prose .lead-line{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glacial);margin:0 0 18px;
}
.prose .closer{
  margin:2.6rem 0 0;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--copper) 35%, transparent);
  font-size:1.2rem;line-height:1.55;font-weight:500;color:var(--moon);
}

/* in-article CTA block */
.art-cta{
  max-width:680px;margin:60px auto 0;
  border:1px solid var(--hairline);border-radius:14px;
  padding:38px 36px;text-align:center;
  background:
    radial-gradient(ellipse 70% 120% at 50% 130%, rgba(111,183,201,.12), transparent 70%),
    var(--ink-2);
}
.art-cta p{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,2.4vw,1.55rem);
  line-height:1.35;letter-spacing:-.01em;color:var(--moon);max-width:26ch;margin:0 auto}
.art-cta p b{font-weight:500;color:var(--glacial-bright)}
.art-cta .btn-primary,.art-cta .text-link{margin-top:28px}
.text-link{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--glacial-bright);display:inline-flex;gap:8px;align-items:center;
}
.text-link::after{content:'\2192';transition:transform .3s}
.text-link:hover::after{transform:translateX(4px)}

/* "More from The Field Guide" footer-of-article (art- prefix: .more belongs to credit cards) */
.art-more{max-width:680px;margin:64px auto 0;border-top:1px solid var(--hairline);padding-top:40px}
.art-more .eyebrow{margin-bottom:24px}
.art-more-links{display:grid;gap:14px}
.art-more-links a{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--moon);
  transition:color .25s;letter-spacing:-.005em;
}
.art-more-links a:hover{color:var(--glacial-bright)}
.art-more-links a .k{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);flex:none;min-width:74px;
}

/* ---------- ARTICLE CARD GRID (the Field Guide notice board on learn.html) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.acard{
  border:1px solid var(--hairline);border-radius:14px;
  padding:32px 32px 30px;position:relative;overflow:hidden;
  background:var(--ink);display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s;
}
.acard::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 90% at 50% -20%, rgba(111,183,201,.12), transparent 65%);
  opacity:0;transition:opacity .4s;
}
.acard:hover{border-color:rgba(111,183,201,.45);transform:translateY(-4px)}
.acard:hover::after{opacity:1}
.acard .kicker{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);margin-bottom:16px;
}
.acard h3{font-family:var(--display);font-weight:400;font-size:1.34rem;letter-spacing:-.01em;line-height:1.22;margin-bottom:12px}
.acard h3 a{color:var(--moon);transition:color .25s}
.acard:hover h3 a{color:var(--glacial-bright)}
.acard p{color:var(--moon-dim);font-size:.95rem;line-height:1.7;flex:1}
.acard .read{
  margin-top:22px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--glacial-bright);display:inline-flex;gap:8px;align-items:center;
}
.acard .read::after{content:'\2192';transition:transform .3s}
.acard:hover .read::after{transform:translateX(4px)}
.acard.feature{grid-column:1 / -1;padding:40px 40px 36px;
  background:linear-gradient(160deg, rgba(111,183,201,.06), transparent 55%), var(--ink)}
.acard.feature h3{font-size:1.9rem}
.acard.feature p{font-size:1.04rem;max-width:60ch}

@media(max-width:760px){
  .card-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:420px){
  .acard,.acard.feature{padding:26px 24px}
}