/* Safari and stay hub pages (/kaziranga-ranges, /manas-ranges, /kaziranga-stays, /manas-stays).
   The same field-journal finish as the homepage and Our story: a hairline coordinates band, the 
︎ eyebrow,
   rectangular hard-shadow switch buttons, and collection cards whose photos wipe open as they arrive.
   Every rule is scoped to .hub-intro / .hub-collection, so the blog and search listings are unchanged. */
.hub-intro{position:relative}
.hub-band{position:relative;display:flex;justify-content:space-between;gap:20px;margin:0 0 clamp(28px,5vh,56px);padding-bottom:10px;color:var(--green);font:600 10px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase}
.hub-band i{position:absolute;left:0;right:0;bottom:0;height:1px;background:#1b2a1e33}
.hub-band i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:hub-band 2.4s cubic-bezier(.22,1,.36,1) .4s forwards}
@keyframes hub-band{to{transform:scaleX(.22)}}
.hub-intro .eyebrow{display:flex;align-items:center;gap:10px}
.hub-intro .eyebrow::before{content:"
︎";color:var(--orange);font-size:15px;letter-spacing:0}
.hub-intro h1,.hub-intro .lead,.hub-intro .category-switch{animation:hub-rise .9s cubic-bezier(.22,1,.36,1) both}
.hub-intro .eyebrow{animation:hub-rise .9s cubic-bezier(.22,1,.36,1) both}
.hub-intro h1{animation-delay:.1s}.hub-intro .lead{animation-delay:.22s}.hub-intro .category-switch{animation-delay:.32s}
@keyframes hub-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Switch buttons: rectangular with the site's hard offset shadow; the current one is filled. */
.hub-intro .category-switch a{border:1px solid var(--forest);border-radius:2px;background:#fffef8;color:#1b2a1e;text-decoration:none;box-shadow:4px 4px 0 var(--forest);transition:translate .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
.hub-intro .category-switch a:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--forest)}
.hub-intro .category-switch a[aria-current=page]{background:var(--forest);color:var(--cream);box-shadow:4px 4px 0 var(--orange)}
.hub-intro .category-switch a[aria-current=page]:hover{box-shadow:6px 6px 0 var(--orange)}
/* Collection toolbar: a framed search box that takes the orange stamp while in use. */
.hub-collection .collection-toolbar input{border:1px solid var(--forest);border-radius:2px;background:var(--cream);transition:box-shadow .3s}
.hub-collection .collection-toolbar input:focus{outline:none;box-shadow:4px 4px 0 var(--orange)}
/* Cards: the photo wipes open upward with a slow zoom-out, cards arrive one after another, and the photo
   frame lifts into an orange stamp on hover. Uses the site's own reveal (html.motion-enabled / .visible). */
.hub-collection .card-image{border:1px solid var(--forest);transition:translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)}
.hub-collection .experience-card:hover .card-image{translate:-3px -3px;box-shadow:7px 7px 0 var(--orange)}
html.motion-enabled .hub-collection .experience-card.reveal .card-image{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1) .1s,translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)}
html.motion-enabled .hub-collection .experience-card.reveal.visible .card-image{clip-path:inset(-12px -12px -12px -12px)}
html.motion-enabled .hub-collection .experience-card.reveal .card-image img{scale:1.15;transition:scale 1.6s cubic-bezier(.22,1,.36,1)}
html.motion-enabled .hub-collection .experience-card.reveal.visible .card-image img{scale:1}
html.motion-enabled .hub-collection .experience-card.reveal:nth-child(3n+2){transition-delay:.12s}
html.motion-enabled .hub-collection .experience-card.reveal:nth-child(3n){transition-delay:.24s}
@media(max-width:760px){.hub-band span:nth-child(2){display:none}}
@media(max-width:560px){.hub-band{display:none}.hub-intro .category-switch a{box-shadow:3px 3px 0 var(--forest)}}
@media(prefers-reduced-motion:reduce){.hub-intro *{animation:none!important}.hub-band i::after{transform:scaleX(.22)}}
html.reduce-motion .hub-intro *{animation:none!important}
html.reduce-motion .hub-band i::after{transform:scaleX(.22)}
/* Card buttons: rectangular with the hard offset shadow, like the rest of the hub page. */
.hub-collection .card-cta{border:1px solid var(--forest);border-radius:2px;box-shadow:4px 4px 0 var(--forest)}
.hub-collection .card-cta:hover,.hub-collection .card-cta:focus-visible{box-shadow:6px 6px 0 var(--forest)}
.hub-collection .card-cta-icon{border-radius:2px}
/* Room under the switch buttons: the next section tucks up by its corner radius, so add that plus a gap. */
.hub-intro .category-switch{margin-bottom:calc(clamp(24px,3.5vw,56px) + clamp(20px,3vw,36px))}
@media(max-width:600px){.hub-intro .category-switch{margin-bottom:calc(28px + 22px)}}
/* Blog (and any intro without switch buttons): the same room before the next section. */
.hub-intro>.lead:last-child{margin-bottom:calc(clamp(24px,3.5vw,56px) + clamp(20px,3vw,36px))}
@media(max-width:600px){.hub-intro>.lead:last-child{margin-bottom:calc(28px + 22px)}}
.hub-intro .breadcrumb{animation:hub-rise .9s cubic-bezier(.22,1,.36,1) both}
/* FAQ: each question is a bordered card with the hard offset shadow; an open one takes the orange stamp.
   The plus sits in a square box and turns into a cross. Questions rise in one after another. */
.hub-faq{display:grid;gap:16px;padding:0 8px 8px 0}
.hub-faq details{padding:0;border:1px solid var(--forest);border-radius:3px;background:var(--cream);box-shadow:5px 5px 0 var(--forest);transition:box-shadow .35s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.22,1,.36,1)}
.hub-faq details:last-child{border-bottom:1px solid var(--forest)}
.hub-faq details:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--forest)}
.hub-faq details[open]{box-shadow:5px 5px 0 var(--orange)}
.hub-faq details[open]:hover{box-shadow:7px 7px 0 var(--orange)}
.hub-faq summary{align-items:center;padding:18px 20px;cursor:pointer;font-family:var(--display);font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.01em}
.hub-faq summary>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--forest);border-radius:2px;font-size:20px;transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s,color .25s}
.hub-faq details[open] summary>span{background:var(--forest);color:var(--cream)}
.hub-faq p{margin:0;padding:0 20px 20px;max-width:72ch;font-size:15px;line-height:1.65}
html.motion-enabled .hub-faq details{animation:hub-rise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(min(var(--i,0),10)*.05s)}
.hub-faq details:nth-child(1){--i:1}.hub-faq details:nth-child(2){--i:2}.hub-faq details:nth-child(3){--i:3}.hub-faq details:nth-child(4){--i:4}.hub-faq details:nth-child(5){--i:5}.hub-faq details:nth-child(6){--i:6}.hub-faq details:nth-child(7){--i:7}.hub-faq details:nth-child(8){--i:8}.hub-faq details:nth-child(9){--i:9}.hub-faq details:nth-child(10){--i:10}
.hub-faq details[open] summary>span{transform:none;font-size:0}
.hub-faq details[open] summary>span::before{content:"−";font-size:20px;line-height:1}
/* FAQ, softened: hairline borders, a light sage offset shadow (soft orange when open) and regular-weight questions. */
.hub-faq details{border-color:#1b2a1e26;box-shadow:3px 3px 0 #a3b18a66}
.hub-faq details:last-child{border-bottom-color:#1b2a1e26}
.hub-faq details:hover{box-shadow:5px 5px 0 #a3b18a8c}
.hub-faq details[open]{border-color:#e6a15c80;box-shadow:3px 3px 0 #e6a15c59}
.hub-faq details[open]:hover{box-shadow:5px 5px 0 #e6a15c80}
.hub-faq summary{padding:16px 20px;font-family:var(--body);font-size:clamp(15px,1.25vw,17px);font-weight:500;letter-spacing:0;color:#2a3a2d}
.hub-faq summary>span{width:30px;height:30px;border-color:#1b2a1e33;font-size:18px;color:var(--green)}
.hub-faq details[open] summary>span{background:#e6a15c26;border-color:#e6a15c80;color:var(--forest)}
.hub-faq p{color:var(--muted)}
/* Blog article: the intro fills the first screen (band at the top, title block at the bottom), so the cover
   photo and article only come into view once the reader scrolls. */
.hub-post{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - var(--nav-height,88px))}
.hub-post>.hub-band{margin-bottom:auto}
.hub-post>.breadcrumb{margin-top:clamp(28px,5vh,56px)}
.hub-post>:last-child{margin-bottom:clamp(28px,5vh,56px)}
/* Phones and tablets show a bottom bar: the article intro leaves room for it so its date line stays visible. */
@media(max-width:1099px){.hub-post{min-height:calc(100svh - var(--nav-height,88px) - 76px)}}
/* Blog article body: headings carry a short orange rule, links an orange underline, and the side box and
   cover photo take the site's framed, hard-shadow finish. */
.hub-article .prose h2{position:relative;padding-top:18px}
.hub-article .prose h2::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--orange)}
.hub-article .prose a{text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.hub-article .booking-note{border:1px solid var(--forest);border-radius:3px;box-shadow:6px 6px 0 var(--forest)}
.hub-article .booking-note .button,.hub-article .booking-note a.button{border:1px solid var(--forest);border-radius:2px;box-shadow:4px 4px 0 var(--forest);transition:translate .3s,box-shadow .3s}
.hub-article .booking-note .button:hover,.hub-article .booking-note a.button:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--forest)}
/* ---- Blog article, made to be looked at as well as read ---------------------------------------------------
   Reading-progress line; a large opening paragraph with a drop cap; numbered section headings with a big
   outlined numeral; photos as framed, alternately tilted prints; and gentle arrivals (hub-article.js). */
.hub-progress{position:fixed;left:0;top:0;z-index:60;width:100%;height:3px;background:var(--orange);transform:scaleX(var(--hub-read,0));transform-origin:left;pointer-events:none}
.hub-article .prose{counter-reset:hub-section}
.hub-article .prose>p:first-of-type{font-size:clamp(18px,1.6vw,21px);line-height:1.7;color:var(--forest)}
.hub-article .prose>p:first-of-type::first-letter{float:left;margin:6px 12px 0 0;padding:4px 12px 2px;border:1px solid var(--forest);box-shadow:4px 4px 0 var(--orange);background:var(--cream);color:var(--forest);font:600 clamp(46px,5vw,64px)/.9 var(--display)}
.hub-article .prose>h2{counter-increment:hub-section;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:18px;margin-top:clamp(48px,6vw,80px)}
.hub-article .prose>h2::after{content:counter(hub-section,decimal-leading-zero);grid-column:1;grid-row:1;color:transparent;-webkit-text-stroke:1px var(--orange);font:700 clamp(54px,6vw,84px)/.8 var(--display);letter-spacing:-.04em}
.hub-article .prose>h2::before{grid-column:1 / -1;grid-row:2;position:static;width:40px;margin-top:14px}
.hub-article .gallery-grid{gap:clamp(18px,2.4vw,30px);padding:0 10px 10px 0}
.hub-article .gallery-item{border:1px solid var(--forest);border-radius:3px;box-shadow:6px 6px 0 var(--forest);transition:translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),rotate .45s cubic-bezier(.22,1,.36,1),clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.hub-article .gallery-item:nth-child(odd){rotate:-1.2deg}
.hub-article .gallery-item:nth-child(even){rotate:1.4deg;box-shadow:6px 6px 0 var(--orange)}
.hub-article .gallery-item:hover{rotate:0deg;translate:-3px -3px;box-shadow:9px 9px 0 var(--orange)}
.hub-anim .prose>h2,.hub-anim .prose>p{opacity:0;translate:0 24px;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1)}
.hub-anim .prose>h2.is-in,.hub-anim .prose>p.is-in{opacity:1;translate:0 0}
.hub-anim .gallery-item{clip-path:inset(100% 0 0 0)}
.hub-anim .gallery-item.is-in{clip-path:inset(-14px -14px -14px -14px)}
@media(max-width:560px){.hub-article .prose>h2{column-gap:12px}.hub-article .gallery-item{box-shadow:4px 4px 0 var(--forest)}.hub-article .gallery-item:nth-child(even){box-shadow:4px 4px 0 var(--orange)}}
@media(prefers-reduced-motion:reduce){.hub-progress{display:none}}
/* Blog article hero: the post's cover photo is the hero background (darkened for legibility), the title sits
   over it, and a row of framed info boxes (reading time, date, author, chapters, place) is built from the post. */
.hub-post.has-cover{position:relative;isolation:isolate;color:var(--cream);background:var(--forest)}
.hub-post-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hub-post-media .visual-media,.hub-post-media img,.hub-post-media video{width:100%;height:100%;object-fit:cover}
.hub-post-media img{animation:hub-drift 18s ease-out both}
@keyframes hub-drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.hub-post.has-cover::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1b2a1e8c 0%,#1b2a1e26 34%,#1b2a1ecc 72%,#1b2a1ef2 100%),linear-gradient(90deg,#1b2a1ea6 0%,transparent 70%)}
.hub-post.has-cover h1,.hub-post.has-cover .lead{color:var(--cream)}
.hub-post.has-cover .lead{color:#fcf9f2d9}
.hub-post.has-cover .eyebrow,.hub-post.has-cover .breadcrumb{color:var(--gold,#e6cf95)}
.hub-post.has-cover .hub-band{color:#fcf9f2b8}
.hub-post.has-cover .hub-band i{background:#fcf9f238}
.hub-post-facts{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(20px,3vh,30px) 0 0;padding:0;list-style:none;animation:hub-rise .9s cubic-bezier(.22,1,.36,1) .4s both}
.hub-post-facts li{display:grid;gap:4px;min-width:120px;padding:12px 16px;border:1px solid var(--forest);border-radius:2px;background:var(--cream);color:var(--forest);box-shadow:4px 4px 0 var(--orange)}
.hub-post-facts small{color:var(--green);font:600 10px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
.hub-post-facts b{font:600 16px/1.2 var(--display);letter-spacing:-.01em}
.hub-post.has-cover .hub-post-facts li{border-color:#fcf9f299;background:#1b2a1e8c;color:var(--cream);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hub-post.has-cover .hub-post-facts small{color:var(--gold,#e6cf95)}
@media(max-width:560px){.hub-post-facts{gap:8px}.hub-post-facts li{min-width:0;flex:1 1 calc(50% - 8px);padding:10px 12px}.hub-post-facts b{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hub-post-media img{animation:none}}
html.reduce-motion .hub-post-media img{animation:none}
/* Blog article hero spread over the screen like the range and stay heroes: the title block at the top, the
   Published / Written by boxes at the bottom (clear of the chat buttons), the photo clear in between.
   The boxes are clear frosted glass. Applies to every blog post automatically (not the founder story). */
.hub-post>.hub-band{margin-bottom:clamp(20px,4vh,40px)}
.hub-post{justify-content:flex-start}
.hub-post .hub-post-facts{margin-top:auto;padding-top:24px}
.hub-post.has-cover::before{background:linear-gradient(180deg,#1b2a1ed9 0%,#1b2a1e8c 30%,#1b2a1e1a 50%,#1b2a1e33 62%,#1b2a1ecc 88%,#1b2a1ef2 100%)}
.hub-post.has-cover .hub-post-facts li{border-color:#fcf9f266;background:linear-gradient(135deg,#fcf9f22e,#fcf9f20f);box-shadow:0 10px 30px -12px #0000004d,inset 0 1px 0 #fcf9f240;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);text-shadow:0 1px 8px #0006}
.hub-post.has-cover .hub-post-facts li:first-child{border-color:#e6a15ccc;box-shadow:0 10px 30px -12px #0000004d,inset 0 1px 0 #fcf9f240,inset 3px 0 0 var(--orange)}
@media(max-width:1279.98px){.hub-post .hub-post-facts{padding-right:64px;margin-bottom:24px}}

/* ---- Blog story layout (hub-article.js builds these from each post's own content) ------------------------- */
.hub-article .prose>p{max-width:68ch}
.hub-toc{margin:clamp(28px,4vw,44px) 0;padding:20px 22px 18px;border:1px solid var(--forest);border-radius:4px;background:#fffdf8;box-shadow:6px 6px 0 var(--orange);max-width:640px}
.hub-toc-title{margin:0 0 10px;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.hub-toc-title::before{content:"\2733";margin-right:8px;color:var(--orange)}
.hub-toc ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;counter-reset:toc}
.hub-toc li{counter-increment:toc}
.hub-toc a{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #dccbab;border-radius:999px;background:#fff;color:var(--forest);font-size:13px;line-height:1.2;text-decoration:none;transition:border-color .2s,background .2s,translate .2s}
.hub-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;color:var(--orange)}
.hub-toc a:hover,.hub-toc a:focus-visible{border-color:var(--forest);background:#fbf3e4;translate:0 -1px}
.hub-article .prose>h2{scroll-margin-top:calc(var(--nav-height,88px) + 24px)}
.hub-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:22px 0 28px;max-width:860px}
.hub-fact{margin:0;padding:16px 18px;border:1px solid #dccbab;border-left:4px solid var(--orange);border-radius:4px;background:#fffdf8;font-size:15px;line-height:1.6;color:var(--forest);box-shadow:0 14px 26px -22px #1b2a1e59}
.hub-fact b{display:block;margin-bottom:4px;font:600 17px/1.25 var(--display);color:var(--forest)}
.hub-figure{margin:clamp(30px,4vw,52px) 0;max-width:820px}
.hub-figure.is-right{margin-left:auto}
.hub-figure-photo{display:block;width:100%;padding:0;border:1px solid var(--forest);border-radius:3px;background:var(--cream);box-shadow:8px 8px 0 var(--forest);overflow:hidden;cursor:zoom-in;rotate:-.8deg;transition:rotate .45s cubic-bezier(.22,1,.36,1),translate .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.hub-figure.is-right .hub-figure-photo{rotate:.9deg;box-shadow:8px 8px 0 var(--orange)}
.hub-figure-photo img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hub-figure-photo:hover,.hub-figure-photo:focus-visible{rotate:0deg;translate:-3px -3px;box-shadow:11px 11px 0 var(--orange)}
.hub-figure-photo:hover img{transform:scale(1.04)}
.hub-figure figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.hub-figure figcaption::before{content:"\2014  "}
.hub-anim .hub-toc,.hub-anim .hub-facts,.hub-anim .hub-figure{opacity:0;translate:0 24px;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1)}
.hub-anim .hub-toc.is-in,.hub-anim .hub-facts.is-in,.hub-anim .hub-figure.is-in{opacity:1;translate:0 0}
@media(max-width:600px){
 .hub-toc{padding:16px;box-shadow:4px 4px 0 var(--orange)}
 .hub-figure-photo,.hub-figure.is-right .hub-figure-photo{rotate:0deg;box-shadow:5px 5px 0 var(--forest)}
 .hub-figure-photo img{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){.hub-figure-photo,.hub-figure-photo img,.hub-toc a{transition:none}}
/* The blog post's title band fills the first screen, so the next section's rounded top edge waits below the fold
   and only appears once the reader scrolls (the same rule as the founder story). */
.page-intro.hub-post{--hub-tuck:clamp(24px,3.5vw,56px);box-sizing:border-box;min-height:calc(100vh - var(--nav-height,88px) - var(--dock-height,0px) + var(--hub-tuck));min-height:calc(100svh - var(--nav-height,88px) - var(--dock-height,0px) + var(--hub-tuck))}
@media(max-width:600px){.page-intro.hub-post{--hub-tuck:28px}}
@media(prefers-reduced-motion:reduce){.page-intro.hub-post{min-height:0}}
html.reduce-motion .page-intro.hub-post{min-height:0}
/* Blog posts typed as plain lines (hub-article.js): sub-headings inside a numbered section, and bullet lists typed as
   "- " lines. They rise in with the rest of the story. */
.hub-article .prose>h3.hub-auto-subheading{max-width:68ch;margin:clamp(26px,3vw,36px) 0 10px;padding-left:14px;border-left:3px solid var(--orange);color:var(--forest);font:600 clamp(19px,1.7vw,23px)/1.3 var(--display);letter-spacing:-.01em}
.hub-article .prose>ul.hub-list{max-width:68ch;margin:6px 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.hub-article .prose>ul.hub-list>li{position:relative;padding-left:24px;line-height:1.6}
.hub-article .prose>ul.hub-list>li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border:1.5px solid var(--orange);transform:rotate(45deg)}
.hub-anim .prose>h3,.hub-anim .prose>ul{opacity:0;translate:0 24px;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1)}
.hub-anim .prose>h3.is-in,.hub-anim .prose>ul.is-in{opacity:1;translate:0 0}
/* Reading rhythm (hub-article.js): lead-ins, pull-quotes, callouts, FAQ questions, section icons, the closing
   invitation and the share row. Same words as the post; only how they are shown. */
.hub-article .prose>p.hub-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.75;color:var(--forest)}
.hub-article .prose>p.hub-pull{max-width:26ch;margin:clamp(22px,3vw,34px) 0;padding:6px 0 6px 22px;border-left:4px solid var(--orange);color:var(--forest);font:italic 600 clamp(24px,2.6vw,34px)/1.25 var(--display);letter-spacing:-.01em}
.hub-article .prose>p.hub-callout{max-width:60ch;margin:22px 0;padding:16px 20px 16px 52px;position:relative;border:1px solid var(--forest);border-radius:2px;background:#fffdf8;box-shadow:4px 4px 0 var(--orange);color:var(--forest);font:600 clamp(17px,1.5vw,20px)/1.45 var(--display)}
.hub-article .prose>p.hub-callout::before{content:"\201C";position:absolute;left:16px;top:6px;color:var(--orange);font:700 48px/1 var(--display)}
.hub-article .prose>p.hub-faq-q{max-width:68ch;margin:26px 0 6px;padding:12px 16px;border-left:3px solid var(--green);background:color-mix(in srgb,var(--cream) 70%,var(--sand));color:var(--forest);font:600 17px/1.4 var(--display)}
.hub-article .prose>p.hub-faq-q::before{content:"Q.";margin-right:8px;color:var(--orange);font-weight:700}
.hub-article .prose .hub-h2-text{display:inline-flex;align-items:flex-start;gap:12px}
.hub-article .prose .hub-icon{flex:none;width:clamp(26px,2.2vw,32px);height:clamp(26px,2.2vw,32px);margin-top:.12em;padding:5px;border:1px solid var(--orange);border-radius:50%;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;background:#fffdf8}
.hub-article .prose>h3 .hub-icon{width:24px;height:24px;padding:4px;margin:0 10px 0 0;vertical-align:-5px}
.hub-article .prose>h3.hub-auto-subheading{border-left:0;padding-left:0}
.hub-article .hub-fact b::before{content:"\2726";margin-right:8px;color:var(--orange)}
.hub-invite{margin:clamp(40px,5vw,64px) 0 18px;padding:clamp(22px,3vw,34px);border:1px solid var(--forest);border-radius:2px;background:var(--forest);color:var(--cream);box-shadow:6px 6px 0 var(--orange)}
.hub-invite .hub-invite-kicker{margin:0 0 6px;color:var(--gold,#e6cf95);font:600 11px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase}
.hub-invite .hub-invite-title{max-width:22ch;margin:0 0 18px;color:var(--cream);font:600 clamp(24px,2.6vw,34px)/1.15 var(--display)}
.hub-invite-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hub-invite .text-link{color:var(--cream);border-color:var(--cream)}
.hub-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 clamp(36px,5vw,56px);color:var(--forest);font:600 13px/1.3 var(--body)}
.hub-share a,.hub-share button{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid var(--forest);border-radius:2px;background:#fffdf8;color:var(--forest);box-shadow:3px 3px 0 var(--forest);font:inherit;text-decoration:none;cursor:pointer}
.hub-share a:hover,.hub-share button:hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--forest)}
/* "In this story", premium and light: a two-column contents list instead of rounded pills. Each entry has its number
   in orange, the title in the display face and a fine dashed rule; hovering slides in an arrow. */
.hub-toc{max-width:780px;padding:22px clamp(18px,3vw,30px) 12px;border:1px solid var(--forest);border-radius:2px;background:linear-gradient(135deg,#fffdf8 0%,#f7efe0 100%);box-shadow:5px 5px 0 #e2c9a3}
.hub-toc-title{margin-bottom:6px}
.hub-toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 34px}
.hub-toc a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:12px 2px;border:0;border-bottom:1px dashed #d9c4a0;border-radius:0;background:none;color:var(--forest);font:500 clamp(15px,1.15vw,16.5px)/1.35 var(--display);letter-spacing:-.005em}
.hub-toc a::before{min-width:24px;font:700 12px/1 var(--body);letter-spacing:.1em;color:var(--orange)}
.hub-toc a::after{content:"\2192";color:var(--orange);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.hub-toc a:hover,.hub-toc a:focus-visible{border-color:var(--orange);background:none;color:var(--green);translate:none}
.hub-toc a:hover::after,.hub-toc a:focus-visible::after{opacity:1;transform:none}
/* Paragraphs with more life: a slightly larger, airier text; each section opens with a lead-in that has an orange
   rule and a stronger first line. */
.hub-article .prose>p{font-size:clamp(16.5px,1.15vw,18px);line-height:1.85;color:#2f4233}
.hub-article .prose>p.hub-lead{padding-left:18px;border-left:2px solid var(--orange);color:var(--forest)}
.hub-article .prose>p.hub-lead::first-line{font-weight:600}
.hub-article .prose>p:first-of-type{border-left:0;padding-left:0}
/* Section titles: the number and the title on one line (no icon). */
.hub-article .prose>h2{align-items:center}