/* Bridge Academy — shared guide/article styles.
   Design system matches the homepage: Libre Baskerville + Nunito Sans,
   celeste + gold. Mobile-safe per NEW_PAGE_CHECKLIST (grids collapse,
   min-width:0 on grid children, media capped). */
:root{
  --celeste:#75AADB;--celeste-mid:#4d8ec8;--celeste-dark:#2c6faa;--celeste-deep:#1a4f80;
  --white:#fff;--offwhite:#f5f8fd;--cream:#fefcf8;
  --gold:#C8982A;--gold-light:#e0b040;
  --ink:#0f1e30;--ink-mid:#1e3a58;--gray:#4d6f90;--gray-light:#8faabf;
  --border:rgba(117,170,219,0.20);
}
*{box-sizing:border-box}
html,body{max-width:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Nunito Sans',system-ui,sans-serif;font-weight:400;line-height:1.75;font-size:17px}
h1,h2,h3,h4{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;color:var(--ink);line-height:1.18;letter-spacing:-0.01em}
img,svg,video,iframe,table{max-width:100%}
a{color:var(--celeste-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 22px}

/* header / footer shared with site look */
header.site{background:var(--white);border-bottom:1px solid var(--border);padding:14px 0;position:sticky;top:0;z-index:50}
header.site .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Libre Baskerville',serif;font-weight:700;font-size:19px;color:var(--celeste-deep);text-decoration:none}
.brand span{color:var(--gold)}
.nav-cta{background:var(--celeste-deep);color:#fff;padding:9px 18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:0}
.nav-cta:hover{text-decoration:none;background:var(--celeste-dark)}

/* article */
.crumbs{font-size:13px;color:var(--gray);padding:20px 0 0}
.crumbs a{color:var(--gray)}
article{padding:8px 0 40px}
article h1{font-size:clamp(28px,4.6vw,40px);margin:14px 0 6px}
.lede{font-size:19px;color:var(--ink-mid);margin:0 0 8px}
.meta{font-size:13px;color:var(--gray);margin-bottom:26px;border-bottom:1px solid var(--border);padding-bottom:18px}
article h2{font-size:25px;margin:38px 0 12px;padding-top:6px}
article h3{font-size:20px;margin:26px 0 8px}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin-bottom:8px}
article strong{color:var(--ink)}

/* answer box — the AI-extractable direct answer */
.answer{background:var(--offwhite);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:4px;padding:18px 20px;margin:0 0 28px}
.answer p{margin:0}

.callout{background:#fff;border:1px solid var(--border);border-radius:4px;padding:16px 18px;margin:22px 0;font-size:15.5px;color:var(--ink-mid)}
.callout.warn{border-left:4px solid var(--gold)}

table.data{border-collapse:collapse;width:100%;margin:18px 0;font-size:15px}
table.data th,table.data td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
table.data th{background:var(--offwhite);font-family:'Nunito Sans',sans-serif;font-weight:700}
.src{font-size:12.5px;color:var(--gray);margin-top:4px}

/* FAQ */
.faq h2{margin-top:36px}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{font-weight:700;color:var(--ink);cursor:pointer;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+ ';color:var(--gold);font-weight:700}
.faq details[open] summary::before{content:'– '}
.faq details p{margin:10px 0 0;color:var(--ink-mid);font-size:16px}

/* CTA band */
.cta{background:linear-gradient(160deg,var(--celeste-deep),var(--celeste-mid));color:#fff;border-radius:6px;padding:32px 26px;margin:40px 0;text-align:center}
.cta h2{color:#fff;margin:0 0 8px;font-size:24px}
.cta p{color:#eaf3fb;margin:0 0 18px}
.cta a{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:13px 28px}
.cta a:hover{text-decoration:none;background:var(--gold-light)}

/* related guides grid */
.rel{margin:36px 0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.rel-grid>*{min-width:0}
.rel-card{display:block;background:#fff;border:1px solid var(--border);border-radius:4px;padding:16px 18px}
.rel-card:hover{text-decoration:none;border-color:var(--celeste)}
.rel-card b{display:block;font-family:'Libre Baskerville',serif;color:var(--ink);margin-bottom:4px;font-size:16px}
.rel-card span{font-size:13.5px;color:var(--gray)}

footer.site{background:var(--ink);color:var(--gray-light);font-size:13.5px;padding:30px 0;margin-top:40px}
footer.site a{color:var(--gray-light)}

/* guide index cards */
.idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:26px 0}
.idx-grid>*{min-width:0}
.idx-card{display:block;background:#fff;border:1px solid var(--border);border-radius:5px;padding:22px}
.idx-card:hover{text-decoration:none;border-color:var(--celeste);box-shadow:0 8px 24px rgba(26,79,128,.08)}
.idx-card h2{font-size:19px;margin:0 0 8px}
.idx-card p{color:var(--gray);font-size:14.5px;margin:0}

/* ============ PREMIUM LAYER — shared header nav, hero image, scroll motion ============ */
header.site .nav-links{display:flex;align-items:center;gap:22px}
header.site .nav-links a{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}
header.site .nav-links a:hover{color:var(--celeste-dark);text-decoration:none}
header.site .nav-links a.nav-cta{color:#fff}
@media(max-width:720px){ header.site .nav-links a:not(.nav-cta){display:none} }

/* guide hero banner image */
.guide-hero{border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(10,30,60,.16);margin:6px 0 26px}
.guide-hero img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.photo-round{border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(10,30,60,.14);margin:22px 0}
.photo-round img{display:block;width:100%;height:auto}

/* reveal on scroll (JS toggles .in); reduced-motion safe */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

.brand-logo{width:34px;height:34px;vertical-align:-9px;margin-right:2px}

/* ============ floating art system + immersive guide hero ============ */
.float-art{position:absolute;pointer-events:none;will-change:transform;z-index:1}
.float-art .art{display:block;width:100%;height:auto;opacity:0;transition:opacity 1.2s ease;filter:drop-shadow(0 14px 26px rgba(4,16,34,.28))}
.float-art.in .art{opacity:.95}
.float-art .art.swayA{animation:swayA 11s ease-in-out infinite}
.float-art .art.swayB{animation:swayB 13s ease-in-out infinite}
@keyframes swayA{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-8px)}}
@keyframes swayB{0%,100%{transform:rotate(1.8deg) translateY(0)}50%{transform:rotate(-1.6deg) translateY(7px)}}
@keyframes fly{0%,100%{transform:translate(0,0)}50%{transform:translate(13px,-9px)}}
.g-fa-bird .art{animation:fly 7s ease-in-out infinite}

.g-hero{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--celeste-deep) 0%,var(--celeste-mid) 60%,var(--celeste) 100%);color:#fff;padding:30px 0 0}
.g-hero-in{max-width:820px;margin:0 auto;padding:0 24px 22px;position:relative;z-index:2}
.g-hero .crumbs{color:#cfe4f5;padding:0 0 16px}
.g-hero .crumbs a{color:#cfe4f5}
.g-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light,#e0b040);margin-bottom:12px}
.g-hero h1{color:#fff;font-size:clamp(28px,4.4vw,44px);line-height:1.1;margin:0 0 14px;letter-spacing:-.015em}
.g-hero .lede{color:#e8f1fa;font-size:19px;max-width:60ch;margin:0 0 14px}
.g-hero .meta{color:#a9c6e0;border:none;padding:0;margin:0;font-size:13px}
.g-hero-photo{max-width:1000px;margin:0 auto;padding:0 24px;position:relative;z-index:2;transform:translateY(34px)}
.g-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:14px;box-shadow:0 34px 70px rgba(6,20,40,.42)}
.g-hero + .wrap{padding-top:64px}
/* one botanical growing from the bottom-left corner + one flyer in the open sky */
.g-fa-bl{bottom:-18px;left:-40px;width:min(23vw,225px)}
.g-fa-bird{top:16%;right:8%;left:auto;width:84px}
@media(max-width:760px){.g-fa-bl{display:none}.g-fa-bird{top:10%;right:4%;width:58px;opacity:.82}.g-hero + .wrap{padding-top:46px}}
@media(prefers-reduced-motion:reduce){.float-art .art{opacity:.95!important;animation:none!important}.float-art{transform:none!important}}