/* BabelBalls help center (support.babelballs.com): the shop's look over the shared TDY help service's pages.
   The help service's templates are not ours to edit, so the support vhost links this file at the end of every page's <head> (after the template's own <style>),
   writes the BabelBalls header and footer into the page, and points the template's Google Fonts and Font Awesome links at fonts.css and icons.css (docs/help-center/LAYOUT.md).
   Values are the shop's tokens (static/css/site.css, docs/DESIGN.md): black header and footer, white page, bone panels, ink text, Young Serif for display, Hanken Grotesk
   for everything else, 2px corners on controls and none on panels, everything left aligned, red only for a hover and a mark. One width (78rem plus gutters, the shop's)
   for every band, so the logo, the search, the cards, the article and the footer share one left edge.
   Template classes are matched as the help service writes them today; a class it renames simply loses this styling and keeps its own. */

html:root{
  --bb-black:#070707;--bb-ink:#16130F;--bb-white:#fff;--bb-bone:#F4EFE6;--bb-bone-2:#E9E2D4;--bb-line:#D8D0C0;--bb-mute:#5F594F;--bb-mute-dk:#B7B0A4;
  --bb-line-dk:#2C2924;--bb-red:#A31621;--bb-red-lt:#F6D9D6;
  --bb-serif:"Young Serif",Georgia,"Times New Roman",serif;
  --bb-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bb-gut:clamp(1.25rem,4vw,3rem);--bb-max:78rem;--bb-ease:cubic-bezier(.2,.7,.2,1);
  --bb-read:44rem;
  /* the template's own variables, so whatever this file does not restyle still comes out in the brand's colors */
  --bg-color:#fff;--bg-secondary:#F4EFE6;--bg-tertiary:#E9E2D4;--text-color:#16130F;--text-muted:#5F594F;--accent-color:#070707;--accent-hover:#A31621;
  --accent-soft:#E9E2D4;--accent-text:#16130F;--link-color:#16130F;--border-color:#D8D0C0;--border-radius:0;--success-color:#070707;
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%}
html body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bb-white);color:var(--bb-ink);
  font:400 1.0625rem/1.6 var(--bb-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body button,body input,body select,body textarea{font:inherit;color:inherit}
body :focus-visible{outline:2px solid currentColor;outline-offset:3px}
body .powered-by{display:none!important}

/* ---------------------------------------------------------------- one width for every band */
.bb-wrap,
body .hero-content,body .container,body .header-content,body .header-inner{
  width:100%;max-width:calc(var(--bb-max) + 2 * var(--bb-gut));margin-inline:auto;padding-inline:var(--bb-gut)}

/* ---------------------------------------------------------------- the header (written in by the vhost): the shop's black band and lockup, once */
body header.header{display:none}                               /* the template's own header: the logo again, plus the word BabelBalls beside it */
.bb-top{position:sticky;top:0;z-index:50;background:var(--bb-black);color:var(--bb-white)}
.bb-top__in{display:flex;align-items:center;gap:1rem;height:4rem}
.bb-brand{display:inline-flex;align-items:center;flex:none;min-height:2.75rem;text-decoration:none;color:var(--bb-bone)}
.bb-brand__tower{display:block;height:2.375rem;width:calc(2.375rem * 142 / 206)}
.bb-brand__word{display:block;height:1.6rem;width:auto;margin-left:.3rem}
.bb-brand__help{margin-left:.85rem;padding-left:.85rem;border-left:1px solid var(--bb-line-dk);font-weight:600;font-size:1rem;line-height:1.6rem;color:var(--bb-bone)}
.bb-nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.bb-nav a{color:var(--bb-white);text-decoration:none;font-weight:600;font-size:.97rem}
.bb-nav__shop{padding-block:.6rem;text-decoration-thickness:1px!important;text-underline-offset:.35em}
.bb-nav__shop:hover{text-decoration:underline;text-decoration-color:var(--bb-red)}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.25rem;border:1px solid transparent;border-radius:2px;
  font-weight:600;font-size:.97rem;letter-spacing:.01em;text-decoration:none;transition:background-color .25s var(--bb-ease),color .25s var(--bb-ease)}
.bb-nav .bb-btn{background:var(--bb-white);color:var(--bb-black)}
.bb-nav .bb-btn:hover{background:var(--bb-bone)}
.bb-short{display:none}
@media (max-width:40rem){
  .bb-brand__help{margin-left:.6rem;padding-left:.6rem}
  .bb-nav{gap:1rem}
  .bb-long{display:none}.bb-short{display:inline}
  .bb-nav .bb-btn{padding:0 .9rem}
}
@media (max-width:26rem){
  .bb-brand__word{height:1.4rem}
  .bb-brand__help{display:none}
}

/* ---------------------------------------------------------------- the footer (written in by the vhost): the shop's legal facts */
.bb-foot{margin-top:auto;background:var(--bb-black);color:var(--bb-mute-dk);padding:clamp(2.5rem,5vw,3.75rem) 0 2.25rem;font-size:.95rem}
.bb-foot__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding-bottom:1.75rem;border-bottom:1px solid var(--bb-line-dk)}
.bb-foot__brand{display:inline-flex}
.bb-foot__brand img{display:block;height:3.5rem;width:auto}
.bb-foot__nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.bb-foot__nav a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--bb-bone);text-decoration:none;font-weight:600}
.bb-foot__nav a:hover{text-decoration:underline;text-decoration-color:var(--bb-red);text-underline-offset:.35em}
.bb-foot__notice{margin:1.5rem 0 0;max-width:60rem;font-size:.82rem;line-height:1.55}
.bb-foot__copy{margin:.75rem 0 0;font-size:.82rem}
@media (max-width:40rem){.bb-foot__nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0 1rem}}

/* ---------------------------------------------------------------- shared type */
body h1,body h2,body .section-title,body .article-title,body .category-header h1{font-family:var(--bb-serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
body mark{background:var(--bb-bone-2);color:inherit;padding:0 .08em;border-radius:2px}

/* ---------------------------------------------------------------- the crumb bar of the inner pages (the template's div.header) */
body div.header{background:var(--bb-white);border-bottom:1px solid var(--bb-line);padding:.85rem 0}
body div.header .header-content{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem}
body .back-link{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;color:var(--bb-ink);font-weight:600;font-size:.95rem;margin:0}
body .back-link:hover{color:var(--bb-ink);text-decoration:underline;text-decoration-color:var(--bb-red);text-underline-offset:.35em}
body .breadcrumb{color:var(--bb-mute);font-size:.95rem}
body .breadcrumb a{color:var(--bb-ink);font-weight:600}
body .breadcrumb a:hover{color:var(--bb-ink);text-decoration:underline;text-decoration-color:var(--bb-red);text-underline-offset:.35em}
body .header-content:has(.breadcrumb:not(:empty)) .back-link{display:none}   /* the crumb names the way back once the page has loaded */
body .breadcrumb:not(:empty){display:flex;flex-wrap:wrap;align-items:center;min-height:2.75rem;gap:.1rem .45rem}

/* ---------------------------------------------------------------- home: the hero and its search */
body .hero{display:block;min-height:0;background:var(--bb-bone);padding:clamp(2.75rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);text-align:left}
body .hero::after{display:none}
body .hero h1{color:var(--bb-ink);font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 .9rem;text-shadow:none}
body .hero p{color:var(--bb-mute);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);margin:0 0 1.75rem;max-width:36rem}
body .search-container{max-width:44rem;margin:0;position:relative}
body .search-input{display:block;width:100%;height:3.75rem;padding:0 7.75rem 0 3.1rem;background:var(--bb-white);border:1px solid var(--bb-ink);border-radius:2px;
  font-size:1.0625rem;color:var(--bb-ink);box-shadow:none;transition:none}
body .search-input:focus{transform:none;box-shadow:none;outline:2px solid var(--bb-ink);outline-offset:2px}
body .search-input::placeholder{color:var(--bb-mute);opacity:1}
body .search-icon{left:1.1rem;color:var(--bb-ink);font-size:1.2rem}
body .search-btn{display:inline-flex;align-items:center;justify-content:center;right:.375rem;height:2.875rem;padding:0 1.5rem;background:var(--bb-black);color:var(--bb-white);
  border-radius:2px;font-weight:600;font-size:.97rem;transition:background-color .25s var(--bb-ease)}
body .search-btn:hover{background:var(--bb-red)}
body .popular-searches{justify-content:flex-start;gap:.5rem;margin-top:1.1rem}
body .popular-tag{display:inline-flex;align-items:center;min-height:2.5rem;background:var(--bb-white);border:1px solid var(--bb-line);border-radius:2px;color:var(--bb-ink);
  padding:0 .9rem;font-size:.95rem;font-weight:500;backdrop-filter:none;transition:border-color .2s var(--bb-ease)}
body .popular-tag:hover{background:var(--bb-white);border-color:var(--bb-ink)}
@media (max-width:48rem){
  body .search-btn{display:inline-flex;padding:0 1rem}
  body .search-input{padding-right:6.25rem}
}

/* ---------------------------------------------------------------- home: the topics */
body .hero + .container{margin-top:0;padding-top:0;padding-bottom:clamp(2.5rem,5vw,4rem)}
body .section-header{padding-top:clamp(2.5rem,5vw,4rem);margin-bottom:1.25rem}
body .section-title{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.4rem);font-weight:400;line-height:1.15}
body .category-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
body .category-tile{display:flex;flex-direction:column;align-items:flex-start;background:var(--bb-bone);border:0;border-radius:0;padding:1.5rem 1.5rem 1.35rem;text-align:left;
  transition:background-color .25s var(--bb-ease);overflow:visible}
body .category-tile::before{display:none}
body .category-tile:hover{transform:none;box-shadow:none;background:var(--bb-bone-2)}
body .category-icon{width:2rem;height:2rem;margin:0 0 1.25rem;background:none;border-radius:0}
body .category-icon i{display:none}
body .category-icon::before{content:"";display:block;width:100%;height:100%;background:var(--bb-ink);
  -webkit-mask:var(--bbc) center/contain no-repeat;mask:var(--bbc) center/contain no-repeat}
body .category-tile:hover .category-icon{transform:none;background:none;color:inherit}
body .category-tile h3{font-family:var(--bb-serif);font-weight:400;font-size:1.35rem;line-height:1.2;margin:0 0 .4rem}
body .category-tile:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bb-red);text-underline-offset:.2em}
body .category-tile p{color:var(--bb-mute);font-size:.95rem;line-height:1.5;margin:0 0 1.1rem;flex:1 0 auto}
body .category-count{color:var(--bb-mute);font-size:.85rem;font-weight:600}
@media (max-width:64rem){body .category-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:36rem){
  body .category-tiles{grid-template-columns:1fr;gap:.5rem}
  body .category-tile{display:grid;grid-template-columns:1.75rem 1fr;column-gap:1rem;padding:1.1rem 1.1rem 1rem}
  body .category-icon{grid-row:1 / span 3;width:1.75rem;height:1.75rem;margin:.1rem 0 0}
  body .category-tile p{margin-bottom:.5rem}
}

/* ---------------------------------------------------------------- home: the search the page runs in place */
body .search-results{padding-top:clamp(2rem,4vw,3rem)}
body .search-results-header{max-width:var(--bb-read);margin-bottom:.5rem;gap:1rem}
body .search-results-header h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:400}
body .clear-search{background:var(--bb-white);border:1px solid var(--bb-line);border-radius:2px;min-height:2.75rem;padding:0 1rem;color:var(--bb-ink);font-weight:600;font-size:.92rem}
body .clear-search:hover{border-color:var(--bb-ink);color:var(--bb-ink)}
body #searchResultsList{max-width:var(--bb-read)}
body .search-result-item,body .result-item{display:block;background:none;border:0;border-top:1px solid var(--bb-line);border-radius:0;margin:0;padding:1.25rem 0 1.3rem;transition:none}
body .search-result-item:hover,body .result-item:hover{transform:none;border-color:var(--bb-line)}
body .search-result-item h4,body .result-item h3{font-family:var(--bb-serif);font-weight:400;font-size:1.3rem;line-height:1.25;margin:0 0 .35rem;color:var(--bb-ink)}
body .search-result-item:hover h4,body .result-item:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bb-red);text-underline-offset:.2em}
body .search-result-item p,body .result-item p{color:var(--bb-mute);font-size:.975rem;line-height:1.55}
body .search-result-category,body .result-category{display:inline-block;background:none;padding:0;margin-top:.5rem;color:var(--bb-mute);font-size:.85rem;font-weight:600;border-radius:0}
body .result-item mark{background:var(--bb-bone-2);color:inherit;padding:0 .08em}

/* ---------------------------------------------------------------- home: "Still have questions?" */
body .contact-banner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 3rem;background:var(--bb-black);border-radius:0;
  padding:clamp(1.75rem,4vw,3rem);margin-top:clamp(3rem,6vw,4.5rem);text-align:left;color:var(--bb-white)}
body .contact-banner h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);font-weight:400;margin:0;line-height:1.15}
body .contact-banner p{grid-column:1;opacity:1;color:var(--bb-mute-dk);margin:0;font-size:1.0625rem;max-width:34rem}
body .contact-banner h2{grid-column:1}
body .contact-btn{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.8rem;background:var(--bb-white);
  color:var(--bb-black);border-radius:2px;font-size:.97rem;font-weight:600;transition:background-color .25s var(--bb-ease)}
body .contact-btn:hover{transform:none;box-shadow:none;background:var(--bb-bone)}
body .contact-btn i{display:none}
@media (max-width:40rem){
  body .contact-banner{grid-template-columns:1fr}
  body .contact-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}
}

/* ---------------------------------------------------------------- inner pages: the main column */
body > .container{padding-top:clamp(2rem,4vw,3.25rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
body .loading,body .empty,body .error,body .no-results{padding:3rem 0;text-align:left;color:var(--bb-mute)}
body .loading i{font-size:1.25rem;margin:0}
body .loading p{margin-top:.75rem}
body .error h2{font-size:1.8rem;color:var(--bb-ink);margin:0 0 .5rem}
body .error i,body .no-results i{display:none}

/* category */
body .category-header{display:block;margin-bottom:1.5rem}
body .category-icon-wrapper{display:none}
body .category-header h1{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);line-height:1.08;margin:0}
body .category-header p{color:var(--bb-mute);font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);margin-top:.6rem;max-width:var(--bb-read)}
body .article-list{max-width:var(--bb-read);border-bottom:1px solid var(--bb-line)}
body .article-item{background:none;border:0;border-top:1px solid var(--bb-line);border-radius:0;margin:0;padding:1.25rem 0 1.3rem;overflow:visible}
body .article-item::before{display:none}
body .article-item:hover{transform:none;box-shadow:none;border-color:var(--bb-line)}
body .article-item h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;font-family:var(--bb-serif);font-weight:400;font-size:1.3rem;line-height:1.25;margin:0 0 .35rem}
body .article-item:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bb-red);text-underline-offset:.2em}
body .article-item h3 i{display:none}
body .article-item p{color:var(--bb-mute);font-size:.975rem;line-height:1.55}
body .article-item .article-meta{display:none}                       /* view counts: noise to a reader */
body .featured-badge{background:var(--bb-bone);color:var(--bb-ink);border-radius:2px;padding:.1rem .5rem;font-family:var(--bb-sans);font-size:.75rem;font-weight:600;letter-spacing:0}

/* search page (/search?q=) */
body .search-form{display:flex;gap:.5rem;width:100%;max-width:44rem;margin-top:.25rem}
body .search-form .search-input{height:3rem;padding:0 1rem;border:1px solid var(--bb-ink);border-radius:2px;background:var(--bb-white);color:var(--bb-ink)}
body .search-form .search-btn{position:static;transform:none;height:3rem;padding:0 1.1rem;font-size:1.05rem}
body .results-header{color:var(--bb-mute);margin-bottom:.5rem;font-weight:600}
body #results{max-width:var(--bb-read)}

/* ---------------------------------------------------------------- the article */
body .article-header{margin-bottom:clamp(1.5rem,3vw,2.25rem);max-width:var(--bb-read)}
body .article-category{display:none}                                  /* the crumb above already names the topic */
body .article-title{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);line-height:1.08;margin:0 0 .75rem}
body .article-header .article-meta{color:var(--bb-mute);font-size:.9rem;gap:1rem}
body .article-header .article-meta span:first-child{display:none}     /* "7 views" */
body .article-header .article-meta i{display:none}
body .article-content{max-width:var(--bb-read);background:none;border:0;border-radius:0;padding:0;margin:0 0 clamp(2.5rem,5vw,3.5rem);font-size:1.0625rem;line-height:1.65}
body .article-content > :first-child{margin-top:0}
body .article-content h2{font-size:clamp(1.45rem,1.25rem + .7vw,1.75rem);line-height:1.2;margin:2.25rem 0 .75rem}
body .article-content h3{font-family:var(--bb-sans);font-weight:700;font-size:1.125rem;line-height:1.35;margin:1.75rem 0 .5rem;letter-spacing:0}
body .article-content h4{color:var(--bb-ink);font-size:1rem;font-weight:700;margin:1.5rem 0 .4rem}
body .article-content p{margin:0 0 1.05rem}
body .article-content ul,body .article-content ol{margin:0 0 1.15rem;padding-left:1.35rem}
body .article-content li{margin:0 0 .45rem;padding-left:.2rem}
body .article-content li::marker{color:var(--bb-mute)}
body .article-content ol > li::marker{font-weight:600}
body .article-content li > ul,body .article-content li > ol{margin:.45rem 0 0}
body .article-content strong{font-weight:700;color:inherit}
body .article-content a{color:var(--bb-ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bb-mute);text-underline-offset:.2em;transition:text-decoration-color .2s}
body .article-content a:hover{color:var(--bb-ink);text-decoration-color:var(--bb-red)}
body .article-content blockquote{border-left:2px solid var(--bb-ink);padding-left:1rem;margin:1.5rem 0;color:var(--bb-ink);font-style:normal}
body .article-content code,body .article-content kbd{background:var(--bb-bone);border:1px solid var(--bb-line);border-radius:2px;padding:.05em .35em;font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body .article-content table{width:100%;border-collapse:collapse!important;margin:1.25rem 0 1.5rem;font-size:.97rem;line-height:1.45}
body .article-content table th,body .article-content table thead tr{background:var(--bb-bone)!important;color:var(--bb-ink)!important}
body .article-content table th,body .article-content table td{border:1px solid var(--bb-line)!important;padding:.6rem .8rem;text-align:left;vertical-align:top}
body .article-content table th{font-weight:700}
body .article-content table tbody tr:hover{background:none!important}
@media (max-width:40rem){body .article-content table{display:block;overflow-x:auto;width:auto;max-width:100%}}
/* screenshots, as the articles write them (docs/help-center/LAYOUT.md "Pictures in an article"):
   <p><img src=".../help-img/x.webp" alt="..." width="390" loading="lazy"></p> then <p><em>caption</em></p>.
   The width attribute is the size to show it at (a phone shot is taken at 2x): never widened, only shrunk to the column, and the height always follows the width
   (height:auto, so the help service's own img rule can never squash it). A picture stands centered in the reading column on its bone ground; its caption under it. */
body .article-content img{display:block;max-width:100%;height:auto!important;margin:0 auto;border:1px solid var(--bb-line);border-radius:0;background:var(--bb-bone)}
body .article-content p:has(> img){margin:1.75rem 0 .65rem;padding:clamp(1rem,3vw,1.75rem);background:var(--bb-bone);text-align:center}
body .article-content p:has(> img) + p:has(> em:only-child){margin:0 0 1.75rem;text-align:center;color:var(--bb-mute);font-size:.875rem;line-height:1.45}
body .article-content p:has(> img) + p > em:only-child{font-style:normal}
body .article-content hr{border:0;border-top:1px solid var(--bb-line);margin:2rem 0}

/* "Was this article helpful?" */
body .helpful-section{max-width:var(--bb-read);display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;background:none;border:0;border-top:1px solid var(--bb-line);
  border-radius:0;padding:1.5rem 0 0;text-align:left}
body .helpful-section h3{font-family:var(--bb-sans);font-weight:600;font-size:1.0625rem;margin:0}
body .helpful-buttons{justify-content:flex-start;gap:.5rem;margin:0}
body .helpful-btn{min-height:2.75rem;min-width:4.5rem;justify-content:center;padding:0 1.1rem;border:1px solid var(--bb-ink);border-radius:2px;background:var(--bb-white)!important;
  color:var(--bb-ink);font-weight:600;font-size:.95rem;transition:background-color .2s var(--bb-ease),color .2s var(--bb-ease)}
body .helpful-btn i{display:none}
body .helpful-btn:hover{border-color:var(--bb-ink);background:var(--bb-bone)!important}
body .helpful-btn.selected,body .helpful-btn.yes.selected{background:var(--bb-black)!important;border-color:var(--bb-black);color:var(--bb-white)}
body .helpful-stats{flex-basis:100%;color:var(--bb-mute);font-size:.875rem}

/* related articles */
body .related-articles{max-width:var(--bb-read);margin-top:clamp(2.5rem,5vw,3.5rem)}
body .related-articles h3{font-family:var(--bb-serif);font-weight:400;font-size:1.5rem;margin:0 0 .75rem}
body .related-list{gap:0;border-bottom:1px solid var(--bb-line)}
body .related-item{display:flex;min-height:3.25rem;background:none;border:0;border-top:1px solid var(--bb-line);border-radius:0;padding:.85rem 0;color:var(--bb-ink);font-weight:600}
body .related-item:hover{transform:none;border-color:var(--bb-line);text-decoration:underline;text-decoration-color:var(--bb-red);text-underline-offset:.25em}
body .related-item i{display:none}

/* ---------------------------------------------------------------- the "Most read / Recently added" panel: in the page, never over it
   The help service floats it at the right edge of the window from 1200px, where it covered the article. Here it is an ordinary section after the main column,
   and from 72rem a column of its own beside it (the page becomes a grid: the bands full width, the main column and the panel in the 78rem width). */
body .qa{position:static!important;transform:none!important;z-index:auto;margin:0 auto;width:100%;max-width:calc(var(--bb-max) + 2 * var(--bb-gut));
  padding:0 var(--bb-gut) clamp(3rem,6vw,4.5rem)}
body .qa .qa-handle,body .qa .qa-foot{display:none!important}
body .qa .qa-shell{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;width:auto!important;max-width:var(--bb-read);
  max-height:none!important;overflow:visible!important;background:var(--bb-bone);border:0!important;border-radius:0!important;box-shadow:none!important;padding:.5rem 1.25rem 1rem}
body .qa .qa-sec + .qa-sec{border-top:1px solid var(--bb-line)}
body .qa .qa-head{padding:.9rem 0 .5rem;color:var(--bb-ink);font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;min-height:2.75rem}
body .qa .qa-head:hover{color:var(--bb-ink)}
body .qa .qa-ico{display:none}
body .qa .qa-chev{font-size:.9rem;opacity:.7}
body .qa .qa-list{padding:0 0 .5rem}
body .qa .qa-item{padding:.55rem 0;border-radius:0;min-height:2.75rem;gap:0}
body .qa .qa-item:hover,body .qa .qa-item:focus-visible{background:none}
body .qa .qa-item:hover .qa-title{text-decoration:underline;text-decoration-color:var(--bb-red);text-underline-offset:.2em}
body .qa .qa-rank,body .qa .qa-dot{display:none}
body .qa .qa-title{font-size:.95rem;font-weight:600;line-height:1.4}
body .qa .qa-meta{font-size:.82rem;color:var(--bb-mute);margin-top:.1rem}
body .qa #qaPopularList .qa-meta{display:none}                       /* "3 views" */
@media (min-width:72rem){
  body:has(> .qa:not([hidden])){display:grid;align-content:start;
    grid-template-columns:[full-start] minmax(var(--bb-gut),1fr) [main-start] minmax(0,52.5rem) [main-end] 3.5rem [side-start] 22rem [side-end] minmax(var(--bb-gut),1fr) [full-end];
    grid-template-rows:auto auto 1fr auto}
  body:has(> .qa:not([hidden])) > *{grid-column:full}
  body:has(> .qa:not([hidden])) > .container{grid-column:main;grid-row:3;max-width:none;padding-inline:0;margin:0}
  body:has(> .qa:not([hidden])) > .qa{grid-column:side;grid-row:3;align-self:start;position:sticky!important;top:5rem;max-width:none;margin:0;
    padding:clamp(2rem,4vw,3.25rem) 0 3rem}
  body:has(> .qa:not([hidden])) > .qa .qa-shell{max-width:none}
}

/* ---------------------------------------------------------------- the icon of each topic (masks; ink) */
body .category-tile{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='9.5' cy='10' r='.6'/%3E%3Ccircle cx='13' cy='9' r='.6'/%3E%3Ccircle cx='14.5' cy='12.5' r='.6'/%3E%3Ccircle cx='11' cy='14' r='.6'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/getting-started"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8V4.5a1 1 0 0 1 1-1H8M16 3.5h3.5a1 1 0 0 1 1 1V8M20.5 16v3.5a1 1 0 0 1-1 1H16M8 20.5H4.5a1 1 0 0 1-1-1V16'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/shop"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5h14l-1.2 11.5H6.2L5 8.5Z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/orders"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4v-9Z'/%3E%3Cpath d='M3.5 7.5 12 11.5l8.5-4M12 11.5v9'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/your-account"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/lost-and-found"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20.5 20.5'/%3E%3Ccircle cx='10.5' cy='10.5' r='2.5'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/returns"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 13.5 4 9l4.5-4.5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H10'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/on-the-course"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20.5v-17l10 4-10 4'/%3E%3Cpath d='M3 20.5c2.5-1.2 5.5-1.8 9-1.8s6.5.6 9 1.8'/%3E%3C/svg%3E")}
body .category-tile[href$="/category/contact"]{--bbc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10.5H10l-4.5 3.5V16H4V5.5Z'/%3E%3C/svg%3E")}