/* ---- Blog and advice family (design draft, 15 Oct): landing page + article template, on the service page kit ---- */

/* banner: the article's picture full bleed behind it, headline left, Founding Families form right.
   The picture's focus point (CMS focal point) keeps the animal in the gap between the two. */
.blog-hero{position:relative;overflow:hidden;min-height:0;background:var(--ink)}
.blog-hero .hero-bg{position:absolute;inset:0;margin:0}
.blog-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.blog-hero .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,.78) 32%,rgba(11,11,11,.22) 52%,rgba(11,11,11,.22) 62%,rgba(11,11,11,.55) 100%)}
.blog-hero .hero-layer{position:relative;grid-template-columns:minmax(0,560px) minmax(0,1fr) 400px;gap:var(--s32);align-items:center;padding-block:var(--s64)}
.blog-hero .hero-layer>.lead-wrap{grid-column:3}
.blog-hero .eyebrow{color:var(--gold-dark)}
.blog-hero .eyebrow a{color:inherit;text-decoration:none}
.blog-hero .eyebrow a:hover{color:var(--bone)}
.blog-hero h1{margin:var(--s16) 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.2vw,56px);line-height:1.05;
  letter-spacing:-.01em;color:var(--bone);text-wrap:balance}
.blog-hero h1 em{font-style:italic;color:var(--gold-dark)}
.blog-hero .lede{margin:var(--s16) 0 0;font-size:18px;line-height:28px;color:rgba(244,236,225,.88)}
@media(max-width:1100px){.blog-hero .hero-layer{grid-template-columns:minmax(0,1fr) 400px}.blog-hero .hero-layer>.lead-wrap{grid-column:2}
  .blog-hero .scrim{background:linear-gradient(100deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,.7) 55%,rgba(11,11,11,.6) 100%)}}
@media(max-width:1000px){.blog-hero .hero-layer{grid-template-columns:minmax(0,1fr);padding-block:var(--s48)}.blog-hero .hero-layer>.lead-wrap{grid-column:1}
  .blog-hero .scrim{background:linear-gradient(180deg,rgba(11,11,11,.55),rgba(11,11,11,.92) 55%)}}

/* byline: author, date, read time */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8) var(--s16);margin:var(--s24) 0 0;font-size:14px;line-height:20px;color:rgba(244,236,225,.78)}
.byline b{font-weight:500;color:var(--bone)}
.byline .av{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);
  font:500 13px/1 var(--sans);letter-spacing:.06em}
.byline .sep{width:4px;height:4px;border-radius:50%;background:var(--gold)}

.crumbbar{border-bottom:1px solid var(--stone)}

/* section heading row with something on its right (filters, a link) */
.all-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s24)}
.blk h2.sec{margin-bottom:var(--s32)}
.all-head h2.sec{margin-bottom:0}
.all-head{margin-bottom:var(--s32)}

/* latest article: in the banner, under the intro, over its own picture */
.latest{margin-top:var(--s48);padding-top:var(--s24);border-top:1px solid rgba(226,193,133,.4)}
.latest .sg-h{color:var(--gold-dark)}
.latest-t{margin:var(--s8) 0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.12;text-wrap:balance}
.latest-t a{color:var(--bone);text-decoration:none}
.latest-t a:hover{color:var(--gold-dark)}
.latest .bc-m{margin:0;padding:0;color:rgba(244,236,225,.75)}
.latest .textlink{color:var(--bone);margin-top:var(--s8)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s8)}
.chip{appearance:none;border:1px solid var(--stone);background:transparent;border-radius:0;cursor:pointer;min-height:40px;padding:0 16px;
  font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* article cards */
.bcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s24)}
@media(max-width:1000px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bcards{grid-template-columns:minmax(0,1fr)}}
.bc a{display:flex;flex-direction:column;height:100%;background:var(--bone);border:1px solid var(--stone);text-decoration:none;color:var(--ink);
  transition:box-shadow .35s,border-color .35s}
.blk:not(.cream) .bc a{background:var(--cream);border-color:rgba(125,115,104,.35)}
.bc a{user-select:none}
.bc img{-webkit-user-drag:none}
.bc a:hover{border-color:var(--gold);box-shadow:0 24px 40px -28px rgba(11,11,11,.45)}
.bc .ph{margin:0}
.bc-b{padding:var(--s24);display:flex;flex-direction:column;flex:1}
.bc-cat{margin:0;font-weight:500;font-size:11.5px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.bc-t{margin:var(--s12) 0 var(--s12);font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;text-wrap:balance}
.bc-x{margin:0;font-size:15px;line-height:24px}
.bc-m{margin:auto 0 0;padding-top:var(--s16);font-size:13px;line-height:20px;color:var(--muted)}
.latest .bc-m{margin-top:var(--s16);padding-top:0}
.no-match{margin:var(--s24) 0 0}

/* article: "On this page" on the left, the reading column on the right */
.art-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s64);align-items:start}
.art-side{position:sticky;top:110px}
.sg-h{margin:0;font-weight:500;font-size:11.5px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.art-side .toc{list-style:none;margin:var(--s16) 0 0;padding:0;border-left:1px solid var(--stone)}
.art-side .toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:20px;color:var(--muted);text-decoration:none}
.art-side .toc a:hover,.art-side .toc a.on{color:var(--ink);border-left-color:var(--gold)}
@media(max-width:1000px){.art-grid{grid-template-columns:minmax(0,1fr);gap:var(--s32)}.art-side{position:static}}
.art-body{max-width:760px}
.art-body .body{max-width:none}
.art-lead{aspect-ratio:16/9;margin:var(--s32) 0 0}
.art-fig{margin:0 0 var(--s24)}
.art-body h2{margin:var(--s48) 0 var(--s16);font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,36px);line-height:1.12;scroll-margin-top:120px}
.art-body h3{margin:var(--s24) 0 var(--s8);font-weight:500;font-size:17px;line-height:26px}
.art-body a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:not(.btn):hover{color:var(--gold-text)}
.art-body .em-note{margin:0;font-size:17px;line-height:28px}
.art-body .em-note b{font-weight:500}

/* related services: three cards */
.more-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.more-cards.three{grid-template-columns:minmax(0,1fr)}}

/* closing band: a black band the full width of the page content, words left, button right */
.close-band{padding-block:var(--s48)}
.close-band .ask-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s24) var(--s48);
  padding:var(--s48);background:var(--ink);border-left:3px solid var(--gold)}
.close-band h2.sec{margin:0;color:var(--bone)}
.close-band h2.sec .t{max-width:none}
.close-band h2 em{color:var(--gold-dark)}
.close-band .eyebrow{color:var(--gold-dark)}
.close-band .btn{background:var(--gold);color:var(--ink);text-decoration:none}
.close-band .btn:hover{background:var(--bone)}
@media(max-width:700px){.close-band .ask-row{padding:var(--s32) var(--s24)}}

/* keep reading: a sideways scroller, three cards in view, arrows and drag */
.car-ctl{display:flex;align-items:center;gap:var(--s12)}
.car-ctl .textlink{margin-right:var(--s16)}
.car-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.car-btn:hover{background:var(--ink);color:var(--bone)}
.car-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink)}
.bcards.car{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--s24))/3);grid-template-columns:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab}
.bcards.car::-webkit-scrollbar{display:none}
.bcards.car.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.bcards.car.drag a{pointer-events:none}
.bcards.car>li{scroll-snap-align:start}
@media(max-width:1000px){.bcards.car{grid-auto-columns:calc((100% - var(--s24))/2)}}
@media(max-width:640px){.bcards.car{grid-auto-columns:85%}.car-ctl .car-btn{display:none}}

.disclaimer{margin:0;padding-top:var(--s16);border-top:1px solid var(--stone);font-size:12.5px;line-height:20px;color:var(--muted)}
.blk:last-child{padding-top:0}

/* the form's thank-you shows only after sending */
.blog-hero .lead-wrap{position:relative;max-width:460px;width:100%}
.blog-hero .lead-success{display:none}
/* an article with no headings has no "On this page" list: the body takes the full width */
.art-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.art-grid.no-toc .art-side{display:none}
/* lists and quotes written in the CMS */
.art-body ul.body,.art-body ol.body{margin:0 0 var(--s24);padding-left:22px}
.art-body li{margin:0 0 8px}
.art-body blockquote{margin:var(--s32) 0;padding-left:var(--s24);border-left:2px solid var(--gold);font-family:var(--serif);font-size:24px;line-height:1.3}

/* share: the phone's share sheet, or WhatsApp, email and copy link */
.share{position:relative;display:inline-block}
.share-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:0;background:transparent;cursor:pointer;
  font:600 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
.share-at-top{margin-top:var(--s24)}
.share-at-top .share-btn{color:var(--bone);box-shadow:inset 0 0 0 1px rgba(244,236,225,.5)}
.share-at-top .share-btn:hover{background:var(--bone);color:var(--ink)}
.share-end{margin-top:var(--s48);padding-top:var(--s24);border-top:1px solid var(--stone);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s16)}
.share-end .share-q{margin:0;font:600 11.5px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.share-at-end .share-btn{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.share-at-end .share-btn:hover{background:var(--ink);color:var(--bone)}
.share-menu{position:absolute;z-index:20;left:0;top:calc(100% + 6px);min-width:190px;display:flex;flex-direction:column;background:var(--bone);
  border:1px solid var(--stone);border-top:3px solid var(--gold);box-shadow:0 18px 40px -20px rgba(11,11,11,.45)}
.share-at-end .share-menu{left:auto;right:0}
.share-menu[hidden]{display:none}
.share-menu a,.share-menu button{display:block;width:100%;padding:12px 16px;border:0;background:none;text-align:left;cursor:pointer;
  font:500 14px/20px var(--body);color:var(--ink);text-decoration:none}
.share-menu a:hover,.share-menu button:hover{background:var(--cream)}
.art-body .share-menu a{text-decoration:none;color:var(--ink)}