/* Abington Graduate House — shared stylesheet for content/SEO pages. Matches the homepage
   (navy + gold, Fraunces + Inter) but tuned for readable long-form content. */
:root{
  --navy-900:#080D16; --navy-800:#0F1724; --navy-700:#131E33; --navy-600:#1A2744; --navy-500:#2B4570;
  --gold-600:#B8922E; --gold-500:#D4A843; --gold-400:#E0B655;
  --cream-100:#E0D9CB; --cream-200:#D8D0BE; --paper:#F7F3EA; --ink:#1A1A1A;
  --maxw:1180px; --read:68ch; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:
   radial-gradient(60vw 45vw at 85% -8%, rgba(224,182,85,.10), transparent 60%), var(--navy-900);
  color:var(--cream-100); font-family:Inter,system-ui,"Segoe UI",sans-serif; font-size:1.05rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.display{font-family:Fraunces,Georgia,serif; line-height:1.1; letter-spacing:-.015em; color:#F4EEE0; margin:0 0 .5em}
a{color:var(--gold-400); text-decoration:none} a:hover{text-decoration:underline}
p{margin:0 0 1.1em} strong{color:#F4EEE0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
img{max-width:100%; display:block}

/* NAV */
#nav{position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(20px,5vw,48px); background:color-mix(in srgb,var(--navy-900) 88%,transparent);
  backdrop-filter:blur(9px); border-bottom:1px solid color-mix(in srgb,var(--gold-500) 16%,transparent)}
#nav .brand{display:flex; align-items:center; gap:11px; font-family:Fraunces; font-weight:700; letter-spacing:.03em;
  font-size:1rem; color:var(--cream-100); text-transform:uppercase; min-width:0}
#nav .brand img{width:32px; height:32px; border-radius:50%; object-fit:contain; flex-shrink:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-500) 26%,transparent)}
#nav .links{display:none; gap:24px; font-size:.92rem; color:color-mix(in srgb,var(--cream-100) 82%,transparent); font-weight:500}
#nav .links a{color:inherit} #nav .links a:hover{color:var(--gold-400); text-decoration:none}
#nav .pill{background:var(--gold-500); color:var(--navy-800); font-weight:700; font-size:.85rem; padding:10px 18px;
  border-radius:999px; white-space:nowrap; flex-shrink:0}
#nav .pill:hover{text-decoration:none; background:var(--gold-400)}
@media(min-width:900px){ #nav .links{display:flex} }

/* PAGE HERO */
.page-hero{padding:clamp(40px,7vh,86px) 0 clamp(26px,4vh,44px); border-bottom:1px solid color-mix(in srgb,var(--gold-500) 12%,transparent)}
.crumbs{font-size:.82rem; letter-spacing:.04em; color:color-mix(in srgb,var(--cream-100) 60%,transparent); margin-bottom:18px}
.crumbs a{color:color-mix(in srgb,var(--gold-400) 90%,transparent)}
.page-hero h1{font-weight:500; font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem); max-width:20ch; text-wrap:balance}
.page-hero .intro{margin-top:18px; max-width:var(--read); font-size:1.14rem; color:color-mix(in srgb,var(--cream-100) 90%,transparent)}
.page-hero .eyebrow{font-family:Inter; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--gold-400); margin-bottom:14px}

/* ARTICLE */
.article{padding:clamp(30px,5vh,56px) 0 20px}
.article .col{max-width:var(--read)}
.article section{margin:0 0 clamp(28px,4vh,46px)}
.article h2{font-weight:500; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); color:#F4EEE0; margin-bottom:.55em; padding-top:8px}
.article h3{font-weight:600; font-size:1.2rem; color:var(--gold-400); margin:1.4em 0 .4em}
.article ul,.article ol{margin:0 0 1.2em; padding-left:1.3em} .article li{margin:.4em 0}
.article a{text-decoration:underline; text-underline-offset:2px}
.article blockquote{margin:1.4em 0; padding:2px 0 2px 22px; border-left:2px solid var(--gold-500);
  font-family:Fraunces; font-style:italic; font-size:1.2rem; color:color-mix(in srgb,var(--cream-100) 92%,transparent)}
.article figure{margin:0 0 clamp(18px,3vh,28px)}
.article figure img{width:100%; height:auto; border-radius:14px; border:1px solid color-mix(in srgb,var(--gold-500) 14%,transparent);
  box-shadow:0 22px 54px -30px rgba(0,0,0,.8)}
.article figure figcaption{margin-top:9px; font-size:.82rem; font-style:italic; color:color-mix(in srgb,var(--cream-100) 58%,transparent)}

/* FAQ */
.faq h2{margin-bottom:.7em}
.faq .qa{border-top:1px solid color-mix(in srgb,var(--cream-100) 12%,transparent); padding:18px 0}
.faq .qa:last-child{border-bottom:1px solid color-mix(in srgb,var(--cream-100) 12%,transparent)}
.faq .qa h3{font-family:Fraunces; font-weight:600; font-size:1.12rem; color:#F4EEE0; margin:0 0 .4em}
.faq .qa p{margin:0; color:color-mix(in srgb,var(--cream-100) 86%,transparent)}

/* QUICK FACTS — compact, AI-citable fact card near the top of each content page */
.quick-facts{margin:0 0 clamp(28px,4vh,42px); padding:clamp(20px,3.4vw,30px) clamp(20px,3.4vw,32px);
  border-radius:18px; background:linear-gradient(150deg,var(--navy-700),var(--navy-800));
  border:1px solid color-mix(in srgb,var(--gold-500) 24%,transparent);
  box-shadow:0 18px 46px -26px rgba(0,0,0,.7)}
.quick-facts h2{font-family:Fraunces; font-weight:500; font-size:1.28rem; margin:0 0 .5em; color:#F4EEE0;
  padding-bottom:.5em; border-bottom:1px solid color-mix(in srgb,var(--gold-500) 20%,transparent)}
.quick-facts ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.quick-facts li{font-size:.97rem; line-height:1.55; color:color-mix(in srgb,var(--cream-100) 90%,transparent)}
.quick-facts li span{display:inline-block; min-width:112px; font-weight:600; color:var(--gold-400);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-right:6px; vertical-align:baseline}
.quick-facts a{text-decoration:none}
.quick-facts a:hover{text-decoration:underline}
@media(min-width:620px){ .quick-facts li{display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:baseline}
  .quick-facts li span{min-width:0; margin-right:0} }

/* CTA band */
.cta{margin:clamp(34px,6vh,66px) 0 0; padding:clamp(28px,5vh,48px); border-radius:20px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600)); border:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent);
  text-align:center}
.cta h2{font-weight:500; font-size:clamp(1.5rem,1.1rem+1.6vw,2.2rem)}
.cta p{max-width:52ch; margin:12px auto 0; color:color-mix(in srgb,var(--cream-100) 86%,transparent)}
.cta-row{margin-top:24px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1rem; padding:14px 26px; border-radius:12px;
  border:1.5px solid transparent; cursor:pointer; min-height:48px; transition:transform .2s var(--ease)}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-primary{background:var(--gold-500); color:var(--navy-800); box-shadow:0 12px 34px -14px rgba(212,168,67,.7)}
.btn-ghost{background:transparent; color:#F4EEE0; border-color:color-mix(in srgb,var(--gold-500) 60%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--gold-500) 12%,transparent)}

/* FOOTER */
footer{margin-top:clamp(50px,8vh,90px); padding:44px 0 60px; border-top:1px solid color-mix(in srgb,var(--cream-100) 10%,transparent);
  color:color-mix(in srgb,var(--cream-100) 78%,transparent)}
footer .fgrid{display:grid; grid-template-columns:1fr; gap:30px}
@media(min-width:760px){ footer .fgrid{grid-template-columns:1.6fr 1fr 1fr} }
footer h3{font-family:Inter; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin:0 0 12px; font-weight:600}
footer a{display:block; padding:7px 0; color:color-mix(in srgb,var(--cream-100) 80%,transparent); font-size:.95rem}
footer a:hover{color:#F4EEE0; text-decoration:none}
footer .fbrand p{max-width:36ch; font-size:.95rem}
footer .legal{margin-top:34px; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--cream-100) 10%,transparent);
  font-size:.8rem; color:color-mix(in srgb,var(--cream-100) 55%,transparent)}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important; transform:none!important} html{scroll-behavior:auto} }