.checkbox__icon{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.74,.22,1)}.checkbox{cursor:pointer}.checkbox__icon{opacity:0;transition-property:opacity}.checkbox__control:checked~.checkbox__icon,.checkbox__control:checked~label .checkbox__icon,.has-hover .checkbox:hover .checkbox__icon{opacity:1}.faq{padding-bottom:var(--md,11.80556vw) var(--n-md,25vw);padding-top:var(--md,16.66667vw) var(--n-md,25vw);position:relative}.faq .card--entry{--card-ratio:var(--xxxxl,5.2/5.6) var(--n-xxxxl,var(--md,3/4.2) var(--n-md,300/180))}.archive__title{margin-bottom:-.17em}.archive__bg{pointer-events:none;position:absolute;top:0;z-index:1}.faq-modal__title{margin-top:calc(40 * var(--scale-px))}.faq-modal__title--bordered{border-bottom:1px solid var(--t-line)}.faq-modal__title span{display:block;max-width:calc(840 * var(--scale-px))}@media (min-width:568px) and (max-width:667px) and (max-aspect-ratio:13/9),(min-width:668px) and (max-aspect-ratio:10/11),(min-width:668px) and (min-height:416px),(min-width:980px){.journal-modal__content--page{padding:0 calc(3 * var(--grid-col))}.journal-modal__content--page .journal-modal__full-service{margin-right:var(--grid-col)}.journal-modal__content--page .journal-modal__block-carousel-nav{margin-top:calc(20 * var(--scale-px));position:static}.journal-modal__content .carousel__list__inner{margin-left:calc(var(--item-spacing) * -1);overflow:hidden;padding-left:0}.journal-modal__footer--page{padding-left:calc(2 * var(--grid-col));padding-right:calc(2 * var(--grid-col))}}.index-filter__checkbox{margin-bottom:var(--xxxl,calc(30 * var(--scale-px))) var(--n-xxxl,calc(15 * var(--scale-px)))}.index-filter__label{--fos:-0.0795em;--foe:-0.2105em;font-feature-settings:"salt" on;--lh:var(--xxxl,0.97222em) var(--n-xxxl,1.04651em);font-family:TitleNarrow,Helvetica,Arial,sans-serif;font-size:var(--xxxl,calc(7.2 * var(--scale-text-rem))) var(--n-xxxl,calc(4.3 * var(--scale-text-rem)));font-weight:200;letter-spacing:.05em;line-height:var(--lh);margin-right:calc(15 * var(--scale-px));text-transform:uppercase}.is-win .index-filter__label{--fos:-0.0795em;--foe:-0.2105em}html[lang=en] .index-filter__label{--fos:-0.0795em;--foe:-0.2105em;font-feature-settings:"salt" on;--lh:var(--xxxl,0.97222em) var(--n-xxxl,1.04651em);font-family:TitleNarrow,Helvetica,Arial,sans-serif;font-size:var(--xxxl,calc(7.2 * var(--scale-text-rem))) var(--n-xxxl,var(--md,calc(4.3 * var(--scale-text-rem))) var(--n-md,calc(3.6 * var(--scale-text-rem))));font-weight:200;letter-spacing:.05em;line-height:var(--lh);text-transform:uppercase}.is-win html[lang=en] .index-filter__label{--fos:-0.0795em;--foe:-0.2105em}.index-filter__buttons{bottom:8.33333vw;position:absolute}
/* Cards reveal their own photograph on hover.
   This lives in archive.css because the blogs index loads only this stylesheet, not
   pages.css. The page is light themed, so the title and label have to flip to a
   light colour once a dark photograph is behind them or they become unreadable. */
.card--entry{position:relative;overflow:hidden}
.card--entry .card__media{position:absolute;inset:0;z-index:0;opacity:0;
    transform:scale(1.06);pointer-events:none;
    transition:opacity .5s ease, transform .9s cubic-bezier(.25,.74,.22,1)}
.card--entry .card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card--entry .card__media:after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(20,16,14,.45) 0%,rgba(20,16,14,.78) 100%)}
.card--entry .card__lt,.card--entry .card__lb,.card--entry .card__rb{z-index:1;
    transition:color .35s ease}
/* z-index only above -- deliberately NOT position. base.css anchors these to the card's
   corners with position:absolute; overriding that with position:relative dropped them back
   into normal flow, where left/right merely nudge them from wherever they landed. That is
   what made the category label and the + button collide: measured on the page, the label
   ran 623-659 and the button 599-629, a 6px overlap. Absolute still stacks above the hover
   image, which sits at z-index 0, so the reveal is unaffected. */
.has-hover .card--entry:hover .card__media,
.card--entry:focus-within .card__media{opacity:1;transform:scale(1)}
.has-hover .card--entry:hover .card__lt,
.has-hover .card--entry:hover .card__lb,
.card--entry:focus-within .card__lt,
.card--entry:focus-within .card__lb{color:#f5f1ec}
.has-hover .card--entry:hover .btn--outline > svg rect,
.card--entry:focus-within .btn--outline > svg rect{stroke:#f5f1ec}
.has-hover .card--entry:hover .btn__icon svg,
.card--entry:focus-within .btn__icon svg{color:#f5f1ec}

/* The category label and the + button both sit on the bottom row of a blog card, the
   label anchored left and the button right, each free to be as wide as the whole card.
   On these narrow three-column cards a two-word category ran straight under the button.
   Bounding the label on the right at the button's edge makes them share the row instead
   of stacking on top of each other; the reserve covers the largest the button gets. */
.card--entry .card__lb{
    right:calc(var(--card-spacing-h) + 52 * var(--scale-px));
    max-width:none;
}

/* Bias the hover reveal toward the patient. These photographs are composed with the patient
   on the left, the clinician on the right and a deliberately quiet middle for the headline
   -- so the card's centred crop framed the empty middle and showed nobody at all. */
.card--entry .card__media img{
    object-position:15% center;
}