/* content.css — standalone styles for generated article pages (finals, explainers, United).
   Deliberately independent of the hashed app bundle so article pages stay light, fast, and JS-free. */
:root{
  --navy:#0c2a3e; --navy-deep:#071c2b; --navy-soft:#133a52;
  --cream:#f2ead3; --cream-dim:rgba(242,234,211,.72); --cream-faint:rgba(242,234,211,.3);
  --gold:#c9a14a; --gold-soft:rgba(201,161,74,.5);
  --maxw:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--navy);color:var(--cream-dim);
  font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.65;
  background-image:radial-gradient(60rem 30rem at 50% -10rem,var(--navy-soft) 0%,rgba(12,42,62,0) 70%);
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}

/* masthead */
.masthead{display:flex;align-items:center;justify-content:space-between;max-width:72rem;margin:0 auto;padding:1.1rem 1.25rem}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;color:var(--cream);font-weight:700;letter-spacing:.02em}
.wordmark img{width:34px;height:34px}
.wordmark__the{opacity:.7;font-size:.8rem;letter-spacing:.18em}
.wordmark__archv{font-size:1.15rem}
.masthead__actions{display:inline-flex;gap:.75rem}
.btn{display:inline-block;padding:.5rem .9rem;border-radius:.5rem;font-size:.85rem;font-weight:600}
.btn--ghost{border:1px solid var(--gold-soft);color:var(--cream)}
.btn--gold{background:var(--gold);color:var(--navy-deep)}

/* article */
.article{padding:2rem 0 1rem}
.breadcrumb{font-size:.8rem;letter-spacing:.04em;color:var(--cream-faint);text-transform:uppercase;margin:0 0 1rem}
.breadcrumb a{color:var(--cream-faint)}
.article__eyebrow{color:var(--gold);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .6rem}
h1{color:var(--cream);font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 .5rem}
.article__meta{color:var(--cream-faint);font-size:.9rem;margin:0 0 1.5rem}
.article__fig{margin:1.5rem 0 2rem}
.article__fig img{border-radius:.6rem;border:1px solid var(--cream-faint)}
.article__fig figcaption{font-size:.82rem;color:var(--cream-faint);margin-top:.5rem;text-align:center}
h2{color:var(--cream);font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.5rem;margin:2.4rem 0 .6rem;padding-top:1.4rem;border-top:1px solid var(--cream-faint)}
h3{color:var(--cream);font-size:1.12rem;margin:1.6rem 0 .4rem}
p{margin:1rem 0}
strong{color:var(--cream)}
ul,ol{padding-left:1.2rem}
li{margin:.35rem 0}
blockquote{margin:1.4rem 0;padding:.6rem 0 .6rem 1.1rem;border-left:3px solid var(--gold);color:var(--cream)}
.dot{color:var(--gold)}

/* quick answer block (AEO) */
.quick-answer{background:var(--navy-deep);border:1px solid var(--gold-soft);border-radius:.6rem;padding:1.1rem 1.25rem;margin:1.5rem 0}
.quick-answer p{margin:.4rem 0 0}
.quick-answer .qa-label{color:var(--gold);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0}

/* shop CTA + related */
.shopcta{margin:2.2rem 0;padding:1.2rem;border:1px solid var(--gold-soft);border-radius:.6rem;text-align:center}
.shopcta p{margin:0 0 .8rem;color:var(--cream)}
.related{margin:2.5rem 0 1rem}
.related h2{border-top:1px solid var(--cream-faint)}
.related ul{list-style:none;padding:0}
.related li{margin:.5rem 0}

/* footer */
.footer{margin-top:3rem;border-top:1px solid var(--cream-faint);background:var(--navy-deep)}
.footer .wrap{max-width:72rem;padding-top:2rem;padding-bottom:2.5rem}
.footer__links{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;font-size:.9rem;margin:0 0 1rem}
.footer__tag{color:var(--cream);margin:.5rem 0}
.footer__legal{color:var(--cream-faint);font-size:.74rem;line-height:1.5;max-width:60rem}