@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(source-serif-4.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(source-serif-4-italic.woff2) format('woff2');
}
/* Atkinson Hyperlegible Next (Braille Institute, SIL Open Font License; Google Fonts v7, Latin): the Community
   Hub's "Easy to read" font, drawn so letters that look alike elsewhere (I, l, 1; b, d) are told apart. Only
   loaded by a reader who chooses it. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(atkinson-hyperlegible-next.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(atkinson-hyperlegible-next-italic.woff2) format('woff2');
}
/* Fallback faces: a system font reshaped to take the same space as the web font, so text shown before the web
   font arrives does not move when it swaps in. The ascent, descent and line gap come from each font file's own
   metrics, divided by size-adjust (so a line's height matches exactly); size-adjust is the measured width ratio of
   the text of the Home, Acupuncture, About and Book pages (web font ÷ system font at the same size; for Source Serif 4,
   the Community Hub's article text, the text of a hub article). Recompute both if the font files change. */
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  src: local('Times New Roman');
  size-adjust: 96.52%;
  ascent-override: 95.73%;
  descent-override: 29.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 102.85%;
  ascent-override: 103.65%;
  descent-override: 29.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  size-adjust: 91.53%;
  ascent-override: 113.19%;
  descent-override: 36.6%;
  line-gap-override: 0%;
}

/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
:root,:host{--font-sans:"Manrope", sans-serif;--font-serif:"Cormorant Garamond", serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--leading-tight:1.25;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-cream:#f3efe5;--color-paper:#e9e2d4;--color-ink:#263229;--color-sage:#526151;--color-wine:#713e3d;--color-gold:#c9a96e}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.-top-40{top:calc(var(--spacing) * -40)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.-right-8{right:calc(var(--spacing) * -8)}.-right-32{right:calc(var(--spacing) * -32)}.right-8{right:calc(var(--spacing) * 8)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-8{bottom:calc(var(--spacing) * 8)}.left-2{left:calc(var(--spacing) * 2)}.left-8{left:calc(var(--spacing) * 8)}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-9{margin-top:calc(var(--spacing) * 9)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-14{margin-bottom:calc(var(--spacing) * 14)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-1{height:calc(var(--spacing) * 1)}.h-10{height:calc(var(--spacing) * 10)}.h-24{height:calc(var(--spacing) * 24)}.h-\[34rem\]{height:34rem}.h-\[35rem\]{height:35rem}.h-full{height:100%}.h-px{height:1px}.min-h-\[22rem\]{min-height:22rem}.min-h-\[27rem\]{min-height:27rem}.min-h-\[34rem\]{min-height:34rem}.min-h-\[80vh\]{min-height:80vh}.min-h-\[100svh\]{min-height:100svh}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing) * 1)}.w-6{width:calc(var(--spacing) * 6)}.w-10{width:calc(var(--spacing) * 10)}.w-\[34rem\]{width:34rem}.w-\[35rem\]{width:35rem}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[90rem\]{max-width:90rem}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.-translate-y-1{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-1{--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-45{rotate:45deg}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-7{gap:calc(var(--spacing) * 7)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-9{gap:calc(var(--spacing) * 9)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-14{gap:calc(var(--spacing) * 14)}.gap-px{gap:1px}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-7>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-cream\/20>:not(:last-child)){border-color:#f3efe533}@supports (color:color-mix(in lab, red, red)){:where(.divide-cream\/20>:not(:last-child)){border-color:color-mix(in oklab, var(--color-cream) 20%, transparent)}}:where(.divide-ink\/15>:not(:last-child)){border-color:#26322926}@supports (color:color-mix(in lab, red, red)){:where(.divide-ink\/15>:not(:last-child)){border-color:color-mix(in oklab, var(--color-ink) 15%, transparent)}}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-cream\/10{border-color:#f3efe51a}@supports (color:color-mix(in lab, red, red)){.border-cream\/10{border-color:color-mix(in oklab, var(--color-cream) 10%, transparent)}}.border-cream\/15{border-color:#f3efe526}@supports (color:color-mix(in lab, red, red)){.border-cream\/15{border-color:color-mix(in oklab, var(--color-cream) 15%, transparent)}}.border-cream\/20{border-color:#f3efe533}@supports (color:color-mix(in lab, red, red)){.border-cream\/20{border-color:color-mix(in oklab, var(--color-cream) 20%, transparent)}}.border-cream\/25{border-color:#f3efe540}@supports (color:color-mix(in lab, red, red)){.border-cream\/25{border-color:color-mix(in oklab, var(--color-cream) 25%, transparent)}}.border-cream\/30{border-color:#f3efe54d}@supports (color:color-mix(in lab, red, red)){.border-cream\/30{border-color:color-mix(in oklab, var(--color-cream) 30%, transparent)}}.border-cream\/40{border-color:#f3efe566}@supports (color:color-mix(in lab, red, red)){.border-cream\/40{border-color:color-mix(in oklab, var(--color-cream) 40%, transparent)}}.border-cream\/45{border-color:#f3efe573}@supports (color:color-mix(in lab, red, red)){.border-cream\/45{border-color:color-mix(in oklab, var(--color-cream) 45%, transparent)}}.border-current{border-color:currentColor}.border-ink\/10{border-color:#2632291a}@supports (color:color-mix(in lab, red, red)){.border-ink\/10{border-color:color-mix(in oklab, var(--color-ink) 10%, transparent)}}.border-ink\/12{border-color:#2632291f}@supports (color:color-mix(in lab, red, red)){.border-ink\/12{border-color:color-mix(in oklab, var(--color-ink) 12%, transparent)}}.border-ink\/15{border-color:#26322926}@supports (color:color-mix(in lab, red, red)){.border-ink\/15{border-color:color-mix(in oklab, var(--color-ink) 15%, transparent)}}.border-wine{border-color:var(--color-wine)}.bg-cream{background-color:var(--color-cream)}.bg-cream\/30{background-color:#f3efe54d}@supports (color:color-mix(in lab, red, red)){.bg-cream\/30{background-color:color-mix(in oklab, var(--color-cream) 30%, transparent)}}.bg-cream\/95{background-color:#f3efe5f2}@supports (color:color-mix(in lab, red, red)){.bg-cream\/95{background-color:color-mix(in oklab, var(--color-cream) 95%, transparent)}}.bg-current{background-color:currentColor}.bg-ink{background-color:var(--color-ink)}.bg-ink\/10{background-color:#2632291a}@supports (color:color-mix(in lab, red, red)){.bg-ink\/10{background-color:color-mix(in oklab, var(--color-ink) 10%, transparent)}}.bg-ink\/12{background-color:#2632291f}@supports (color:color-mix(in lab, red, red)){.bg-ink\/12{background-color:color-mix(in oklab, var(--color-ink) 12%, transparent)}}.bg-paper{background-color:var(--color-paper)}.bg-sage{background-color:var(--color-sage)}.bg-transparent{background-color:#0000}.bg-wine{background-color:var(--color-wine)}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-ink\/55{--tw-gradient-from:#2632298c}@supports (color:color-mix(in lab, red, red)){.from-ink\/55{--tw-gradient-from:color-mix(in oklab, var(--color-ink) 55%, transparent)}}.from-ink\/55{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-8{padding:calc(var(--spacing) * 8)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-9{padding-block:calc(var(--spacing) * 9)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-20{padding-block:calc(var(--spacing) * 20)}.py-24{padding-block:calc(var(--spacing) * 24)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-7{padding-top:calc(var(--spacing) * 7)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pt-28{padding-top:calc(var(--spacing) * 28)}.pt-44{padding-top:calc(var(--spacing) * 44)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-12{padding-bottom:calc(var(--spacing) * 12)}.pb-14{padding-bottom:calc(var(--spacing) * 14)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pl-7{padding-left:calc(var(--spacing) * 7)}.pl-\[8\%\]{padding-left:8%}.text-center{text-align:center}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.6rem\]{font-size:.6rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.47rem\]{font-size:.47rem}.text-\[0\.55rem\]{font-size:.55rem}.text-\[0\.58rem\]{font-size:.58rem}.text-\[0\.62rem\]{font-size:.62rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[15rem\]{font-size:15rem}.text-\[clamp\(4\.5rem\,9\.5vw\,9\.3rem\)\]{font-size:clamp(4.5rem,9.5vw,9.3rem)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}.leading-9{--tw-leading:calc(var(--spacing) * 9);line-height:calc(var(--spacing) * 9)}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-\[0\.9\]{--tw-leading:.9;line-height:.9}.leading-\[0\.78\]{--tw-leading:.78;line-height:.78}.leading-\[0\.88\]{--tw-leading:.88;line-height:.88}.leading-\[0\.94\]{--tw-leading:.94;line-height:.94}.leading-\[0\.95\]{--tw-leading:.95;line-height:.95}.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.05em\]{--tw-tracking:-.05em;letter-spacing:-.05em}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-\[0\.14em\]{--tw-tracking:.14em;letter-spacing:.14em}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-\[0\.22em\]{--tw-tracking:.22em;letter-spacing:.22em}.tracking-\[0\.24em\]{--tw-tracking:.24em;letter-spacing:.24em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-cream{color:var(--color-cream)}.text-cream\/35{color:#f3efe559}@supports (color:color-mix(in lab, red, red)){.text-cream\/35{color:color-mix(in oklab, var(--color-cream) 35%, transparent)}}.text-cream\/45{color:#f3efe573}@supports (color:color-mix(in lab, red, red)){.text-cream\/45{color:color-mix(in oklab, var(--color-cream) 45%, transparent)}}.text-cream\/50{color:#f3efe580}@supports (color:color-mix(in lab, red, red)){.text-cream\/50{color:color-mix(in oklab, var(--color-cream) 50%, transparent)}}.text-cream\/55{color:#f3efe58c}@supports (color:color-mix(in lab, red, red)){.text-cream\/55{color:color-mix(in oklab, var(--color-cream) 55%, transparent)}}.text-cream\/60{color:#f3efe599}@supports (color:color-mix(in lab, red, red)){.text-cream\/60{color:color-mix(in oklab, var(--color-cream) 60%, transparent)}}.text-cream\/65{color:#f3efe5a6}@supports (color:color-mix(in lab, red, red)){.text-cream\/65{color:color-mix(in oklab, var(--color-cream) 65%, transparent)}}.text-cream\/67{color:#f3efe5ab}@supports (color:color-mix(in lab, red, red)){.text-cream\/67{color:color-mix(in oklab, var(--color-cream) 67%, transparent)}}.text-cream\/68{color:#f3efe5ad}@supports (color:color-mix(in lab, red, red)){.text-cream\/68{color:color-mix(in oklab, var(--color-cream) 68%, transparent)}}.text-cream\/70{color:#f3efe5b3}@supports (color:color-mix(in lab, red, red)){.text-cream\/70{color:color-mix(in oklab, var(--color-cream) 70%, transparent)}}.text-cream\/78{color:#f3efe5c7}@supports (color:color-mix(in lab, red, red)){.text-cream\/78{color:color-mix(in oklab, var(--color-cream) 78%, transparent)}}.text-gold{color:var(--color-gold)}.text-ink{color:var(--color-ink)}.text-ink\/40{color:#26322966}@supports (color:color-mix(in lab, red, red)){.text-ink\/40{color:color-mix(in oklab, var(--color-ink) 40%, transparent)}}.text-ink\/48{color:#2632297a}@supports (color:color-mix(in lab, red, red)){.text-ink\/48{color:color-mix(in oklab, var(--color-ink) 48%, transparent)}}.text-ink\/50{color:#26322980}@supports (color:color-mix(in lab, red, red)){.text-ink\/50{color:color-mix(in oklab, var(--color-ink) 50%, transparent)}}.text-ink\/52{color:#26322985}@supports (color:color-mix(in lab, red, red)){.text-ink\/52{color:color-mix(in oklab, var(--color-ink) 52%, transparent)}}.text-ink\/55{color:#2632298c}@supports (color:color-mix(in lab, red, red)){.text-ink\/55{color:color-mix(in oklab, var(--color-ink) 55%, transparent)}}.text-ink\/60{color:#26322999}@supports (color:color-mix(in lab, red, red)){.text-ink\/60{color:color-mix(in oklab, var(--color-ink) 60%, transparent)}}.text-ink\/62{color:#2632299e}@supports (color:color-mix(in lab, red, red)){.text-ink\/62{color:color-mix(in oklab, var(--color-ink) 62%, transparent)}}.text-ink\/67{color:#263229ab}@supports (color:color-mix(in lab, red, red)){.text-ink\/67{color:color-mix(in oklab, var(--color-ink) 67%, transparent)}}.text-ink\/68{color:#263229ad}@supports (color:color-mix(in lab, red, red)){.text-ink\/68{color:color-mix(in oklab, var(--color-ink) 68%, transparent)}}.text-ink\/\[0\.025\]{color:#26322906}@supports (color:color-mix(in lab, red, red)){.text-ink\/\[0\.025\]{color:color-mix(in oklab, var(--color-ink) 2.5%, transparent)}}.text-wine{color:var(--color-wine)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-65{opacity:.65}.opacity-72{opacity:.72}.opacity-85{opacity:.85}.opacity-100{opacity:1}.shadow-\[0_12px_45px_rgba\(38\,50\,41\,0\.08\)\]{--tw-shadow:0 12px 45px var(--tw-shadow-color,#26322914);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.group-open\:rotate-45:is(:where(.group):is([open],:popover-open,:open) *){rotate:45deg}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:rotate-\[-35deg\]:is(:where(.group):hover *){rotate:-35deg}.group-hover\:text-gold:is(:where(.group):hover *){color:var(--color-gold)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:bg-cream:hover{background-color:var(--color-cream)}.hover\:bg-sage:hover{background-color:var(--color-sage)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-cream:hover{color:var(--color-cream)}.hover\:text-ink:hover{color:var(--color-ink)}.hover\:text-wine:hover{color:var(--color-wine)}.hover\:opacity-100:hover{opacity:1}}@media (width>=40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-\[1\.2fr_1fr_auto\]{grid-template-columns:1.2fr 1fr auto}.sm\:grid-cols-\[3rem_0\.7fr_1\.3fr\]{grid-template-columns:3rem .7fr 1.3fr}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.sm\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.sm\:text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}}@media (width>=48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=64rem){.lg\:mb-3{margin-bottom:calc(var(--spacing) * 3)}.lg\:ml-auto{margin-left:auto}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:min-h-\[52rem\]{min-height:52rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-\[0\.7fr_1\.3fr\]{grid-template-columns:.7fr 1.3fr}.lg\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.lg\:grid-cols-\[0\.62fr_1\.38fr\]{grid-template-columns:.62fr 1.38fr}.lg\:grid-cols-\[0\.65fr_1\.35fr\]{grid-template-columns:.65fr 1.35fr}.lg\:grid-cols-\[0\.72fr_1\.28fr\]{grid-template-columns:.72fr 1.28fr}.lg\:grid-cols-\[0\.75fr_1\.25fr\]{grid-template-columns:.75fr 1.25fr}.lg\:grid-cols-\[1\.2fr_0\.8fr_0\.8fr\]{grid-template-columns:1.2fr .8fr .8fr}.lg\:grid-cols-\[1\.3fr_0\.7fr\]{grid-template-columns:1.3fr .7fr}.lg\:grid-cols-\[1\.35fr_0\.65fr\]{grid-template-columns:1.35fr .65fr}.lg\:items-center{align-items:center}.lg\:items-end{align-items:flex-end}.lg\:p-10{padding:calc(var(--spacing) * 10)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:px-12{padding-inline:calc(var(--spacing) * 12)}.lg\:px-20{padding-inline:calc(var(--spacing) * 20)}.lg\:py-28{padding-block:calc(var(--spacing) * 28)}.lg\:py-32{padding-block:calc(var(--spacing) * 32)}.lg\:py-36{padding-block:calc(var(--spacing) * 36)}.lg\:py-40{padding-block:calc(var(--spacing) * 40)}.lg\:pt-52{padding-top:calc(var(--spacing) * 52)}.lg\:pb-20{padding-bottom:calc(var(--spacing) * 20)}.lg\:pb-28{padding-bottom:calc(var(--spacing) * 28)}.lg\:text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.lg\:text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}}@media (width>=80rem){.xl\:flex{display:flex}}html{scroll-behavior:smooth}body{background:var(--color-cream);font-family:var(--font-sans);margin:0}::selection{background:var(--color-wine);color:var(--color-cream)}.hero-shade{background:linear-gradient(#141f1980 0%,#141f1905 38%),linear-gradient(#141f1905 28%,#141f19c7 100%)}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:currentColor;align-items:center;gap:.75rem;font-size:.64rem;font-weight:600;line-height:1.5;display:flex}@supports (color:color-mix(in lab, red, red)){.eyebrow{color:color-mix(in srgb, currentcolor 60%, transparent)}}.eyebrow:before{content:"";opacity:.5;background:currentColor;width:2rem;height:1px}.botanical-mark:before,.botanical-mark:after{content:"";border:1px solid #f3efe514;border-radius:50%;position:absolute;inset:16%}.botanical-mark:after{inset:32%}.vertical-label{writing-mode:vertical-rl;transform:rotate(180deg)}.hero-image{animation:1.8s cubic-bezier(.22,1,.36,1) both hero-settle}.hero-copy{animation:1.1s cubic-bezier(.22,1,.36,1) .2s both copy-rise}.luxury-marquee{animation:34s linear infinite marquee}.service-panel:after{content:"";opacity:0;border:1px solid;border-radius:50%;width:13rem;height:13rem;transition:opacity .5s,transform .7s cubic-bezier(.22,1,.36,1);position:absolute;bottom:-5rem;right:-3rem;transform:scale(.75)}.service-panel:hover:after{opacity:.12;transform:scale(1)}@keyframes hero-settle{0%{opacity:0;transform:scale(1.06)}to{opacity:.72;transform:scale(1)}}@keyframes copy-rise{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes marquee{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image,.hero-copy,.luxury-marquee{animation:none}.service-panel *,.service-panel:after{transition:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}

body .wp-site-blocks {
	padding: 0;
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

body .wp-site-blocks > *,
body .ft-main,
body .wp-block-post-content {
	margin: 0;
	max-width: none;
}

body
	.is-layout-flow
	> :where(:not([class*="mt-"]):not([class*="my-"]):not([style*="margin"])) {
	margin-block-start: 0;
}

body .wp-block-group > :first-child {
	margin-block-start: 0;
}

body .wp-block-group > :last-child {
	margin-block-end: 0;
}

/* Readable grey text (WCAG 2.1 AA, 4.5:1). Quiet text is the section's own color made fainter, but never fainter
   than --ft-quiet: 74% of ink still reads on the darkest paper card, and dark sections (sage is the lightest)
   need 86% of cream. Text in dark sections is mostly faded cream already, so it is not faded again
   (--ft-quiet-opacity). The reference app's faded utilities (text-ink/40 … text-cream/78) are raised to the same
   floor (matched as attributes, since the class names hold a slash). */
:root,
.wp-block-cover.is-light,
:is(
	.has-cream-background-color,
	.has-paper-background-color,
	.has-white-background-color
) {
	--ft-quiet: 74%;
	--ft-quiet-opacity: 0.74;
}

.wp-block-cover:not(.is-light),
:is(
	.has-ink-background-color,
	.has-sage-background-color,
	.has-wine-background-color,
	.has-black-background-color
) {
	--ft-quiet: 86%;
	--ft-quiet-opacity: 1;
}

:is(p, li).opacity-60 {
	opacity: var(--ft-quiet-opacity);
}

.eyebrow {
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
}

:is(
	[class~="text-ink/40"],
	[class~="text-ink/48"],
	[class~="text-ink/50"],
	[class~="text-ink/52"],
	[class~="text-ink/55"],
	[class~="text-ink/60"],
	[class~="text-ink/62"],
	[class~="text-ink/67"],
	[class~="text-ink/68"]
) {
	color: color-mix(in srgb, var(--color-ink) 74%, transparent);
}

:is(
	[class~="text-cream/35"],
	[class~="text-cream/45"],
	[class~="text-cream/50"],
	[class~="text-cream/55"],
	[class~="text-cream/60"],
	[class~="text-cream/65"],
	[class~="text-cream/67"],
	[class~="text-cream/68"],
	[class~="text-cream/70"],
	[class~="text-cream/78"]
) {
	color: color-mix(in srgb, var(--color-cream) 86%, transparent);
}

/* The gold accent line in a heading is large text (3:1), which plain gold just misses on sage. */
:is(.wp-block-cover:not(.is-light), .has-sage-background-color) .text-gold {
	color: #d6ba84;
}

.ft-photo {
	margin: 0;
}

.ft-photo img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
} /* the editor adds an inline height:auto */
.luxury-marquee p::after {
	content: "";
	width: 0.25rem;
	height: 0.25rem;
	background: var(--color-wine, #713e3d);
	border-radius: 50%;
}

.ft-buttons {
	margin: 0;
	gap: 1rem;
}

.ft-button .wp-block-button__link,
.ft-contact-button a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	border: 1px solid var(--color-wine, #713e3d);
	border-radius: 999px;
	padding: 1rem 1.75rem;
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
	font:
		600 0.68rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	transition: all 0.3s;
}

.ft-button-wine .wp-block-button__link:hover {
	background: transparent;
	color: var(--color-wine, #713e3d);
}

.ft-button-light .wp-block-button__link,
.ft-contact-button.ft-button-light a {
	background: transparent;
	color: var(--color-cream, #f3efe5);
	border-color: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 45.1%,
		transparent
	);
}

.ft-button-light .wp-block-button__link:hover,
.ft-contact-button a:hover {
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
}

.ft-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 25.1%, transparent);
	color: var(--color-cream, #f3efe5);
	background: transparent;
	transition: all 0.5s;
}

body.admin-bar .ft-header {
	top: 32px;
}

/* The notification bar (Global Settings → Notification bar), fixed above the header, which moves down to make room
   for it. Once the page scrolls, the bar slides away and the header returns to the top. site.js measures the bar
   (--ft-notice-height, for messages that wrap on a phone) and turns between several messages. */
.ft-notice-bar {
	--ft-admin-bar: 0px;
	position: fixed;
	top: var(--ft-admin-bar);
	right: 0;
	left: 0;
	z-index: 51;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	background: var(--color-paper, #e9e2d4);
	color: var(--color-ink, #263229);
	font:
		500 0.78rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.02em;
	text-align: center;
	transition: transform 0.5s;
}

body.admin-bar .ft-notice-bar {
	--ft-admin-bar: 32px;
}

body:has(.ft-header.is-scrolled) .ft-notice-bar {
	transform: translateY(calc(-100% - var(--ft-admin-bar)));
}

.ft-notice-messages {
	flex: 0 1 46rem;
}

.ft-notice {
	margin: 0;
}

.ft-notice.is-current {
	animation: ft-notice-in 0.5s ease-out;
}

@keyframes ft-notice-in {
	from {
		opacity: 0;
		transform: translateY(0.3rem);
	}
}

.ft-notice a {
	margin-left: 0.35em;
	color: var(--color-wine, #713e3d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.3s;
}

.ft-notice a:hover {
	color: var(--color-ink, #263229);
}

.ft-notice-step {
	flex: none;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.9rem;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.3s;
}

.ft-notice-step:is(:hover, :focus-visible) {
	opacity: 1;
}

body.has-ft-notice-bar .ft-header {
	top: var(--ft-notice-height, 2.5rem);
}

body.admin-bar.has-ft-notice-bar .ft-header {
	top: calc(32px + var(--ft-notice-height, 2.5rem));
}

body.has-ft-notice-bar .ft-header.is-scrolled {
	top: 0;
}

body.admin-bar.has-ft-notice-bar .ft-header.is-scrolled {
	top: 32px;
}

@media (prefers-reduced-motion: reduce) {
	.ft-notice.is-current {
		animation: none;
	}
}

.ft-header.is-scrolled {
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 94.9%,
		transparent
	);
	color: var(--color-ink, #263229);
	border-color: color-mix(
		in srgb,
		var(--color-ink, #263229) 10.2%,
		transparent
	);
	backdrop-filter: blur(20px);
	box-shadow: 0 12px 45px
		color-mix(in srgb, var(--color-ink, #263229) 7.84%, transparent);
}

/* A backdrop filter makes the header the frame of everything fixed inside it, which squeezed the phone menu into
   the header's strip when it was opened after scrolling down. The open menu covers the page, so the blur can go,
   at once (the header's transition would keep the strip for half a second, scrolling the menu past its top). */
html.has-modal-open .ft-header.is-scrolled {
	backdrop-filter: none;
	transition: none;
}

.ft-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 90rem;
	margin: 0 auto;
	padding: 1.25rem 3rem;
	gap: 2rem;
	transition: padding 0.5s;
}

.ft-header.is-scrolled .ft-header-inner {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.ft-header.is-scrolled .ft-button-light .wp-block-button__link {
	border-color: var(--color-wine, #713e3d);
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
}

.ft-wordmark {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.ft-brand-initial {
	display: flex;
	height: 2.5rem;
	width: 2.5rem;
	align-items: center;
	justify-content: center;
	border: 1px solid currentcolor;
	border-radius: 50%;
	font:
		italic 1.25rem "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

/* The shared logo (Global Settings → Logo): fixed height, natural width, so square and wide logos both fit. */
.ft-brand-logo {
	width: auto;
	max-width: 8rem;
	height: 2.5rem;
	object-fit: contain;
	transition: filter 0.5s;
}

/* The logo is drawn dark, for light backgrounds. While the header is see-through over a dark page top, it is shown
   in cream like the brand name, and it returns to its own color once the header turns cream on scroll. */
.ft-header:not(.is-scrolled) .ft-brand-logo {
	filter: brightness(0) invert(0.95) sepia(0.12);
}

.ft-brand-name {
	font-size: var(--ft-header-brand-size, 0.7rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.ft-brand-tagline {
	display: block;
	font-size: calc(var(--ft-header-brand-size, 0.7rem) * 0.67);
	font-weight: 500;
	letter-spacing: 0.24em;
	opacity: 0.78;
}

/* The menu's and the brand's sizes follow Global Settings → Header (Clinic\HeaderLayout sets the properties). */
.ft-navigation {
	font:
		600 var(--ft-header-menu-size, 0.65rem) / 1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.ft-navigation .wp-block-navigation__container {
	gap: 2.25rem;
}

.ft-navigation a {
	opacity: 0.8;
	text-decoration: none;
}

.ft-navigation a:hover,
.ft-navigation .current-menu-item a {
	opacity: 1;
}

.ft-header-cta .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	font-size: 0.62rem;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	cursor: pointer;
	list-style: none;
	font:
		1.5rem/2rem "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-section-number {
	line-height: 2; /* 24px on the 12px label */
}

.wp-block-group:is(.grid, .flex) > .ft-section-number {
	line-height: calc(4 / 3); /* 16px on the 12px label */
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary span {
	transition: transform 0.38s ease;
}

.wp-block-details[data-ft-closing] summary span {
	transform: none;
}

.ft-main:focus {
	outline: none;
}

.service-panel h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-list {
	list-style: none;
	padding-left: 0;
}

.block-editor-iframe__body .hero-copy {
	animation: none;
}

.block-editor-iframe__body .hero-image {
	animation: none;
	opacity: 0.72;
}

.block-editor-iframe__body .ft-header {
	position: absolute !important;
	top: 0;
	color: var(--color-cream, #f3efe5);
	background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
	padding: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	font:
		2rem/1.2 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	text-transform: none;
	letter-spacing: 0;
	gap: 1.5rem;
}

@media (max-width: 1023px) {
	.ft-header-inner {
		padding: 1.25rem 1.5rem;
	}

	.ft-header .wp-block-buttons.ft-header-cta {
		display: none;
	}

	.ft-navigation
		.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.ft-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

@media (max-width: 782px) {
	body.admin-bar .ft-header {
		top: 46px;
	}

	body.admin-bar .ft-notice-bar {
		--ft-admin-bar: 46px;
	}

	/* On a narrow screen a message may wrap onto a second line. The bar keeps the height of two lines either way, and
	   the header's room for it starts at that height, so site.js measuring the bar moves nothing. */
	.ft-notice-bar {
		min-height: 3.5rem;
	}

	body.has-ft-notice-bar .ft-header {
		top: var(--ft-notice-height, 3.5rem);
	}

	body.admin-bar.has-ft-notice-bar .ft-header {
		top: calc(46px + var(--ft-notice-height, 3.5rem));
	}

	body.admin-bar.has-ft-notice-bar .ft-header.is-scrolled {
		top: 46px;
	}
}

/* The homepage hero fills the screen, but on very tall screens it stops at 68rem: its words do not grow past a
   1440px-wide screen, so a taller hero only added empty photo above them. 68rem keeps a 1920×1080 screen full.
   The owner picks Tall or Medium in the editor's "Homepage photo or video" panel (src/sections/hero-options.js).
   --ft-screen is the window's height (the editor sets it from its own window). The inline min-height the Cover
   saves needs !important. */
.ft-home-hero {
	--ft-screen: 100svh;
	--ft-hero-height: min(var(--ft-screen), 68rem);
	--ft-hero-photo: 0.72;
	--ft-hero-shade: 1;
	min-height: var(--ft-hero-height) !important;
	padding: 0;
}

.ft-home-hero.ft-hero-height-tall {
	--ft-hero-height: min(calc(var(--ft-screen) * 0.85), 58rem);
}

.ft-home-hero.ft-hero-height-medium {
	--ft-hero-height: min(calc(var(--ft-screen) * 0.7), 46rem);
}

/* Core's bottom content position sets align-items with four classes (and Tailwind's items-end with one). */
.ft-home-hero.ft-hero-text-middle {
	align-items: center !important;
}

.ft-home-hero.ft-hero-shade-light {
	--ft-hero-photo: 0.88;
	--ft-hero-shade: 0.6;
}

.ft-home-hero.ft-hero-shade-strong {
	--ft-hero-photo: 0.5;
	--ft-hero-shade: 1;
}

.ft-home-hero .wp-block-cover__inner-container {
	position: static;
	width: 100%;
}

.ft-home-hero > .wp-block-cover__image-background,
.ft-home-hero > .wp-block-cover__video-background {
	opacity: var(--ft-hero-photo);
}

/* The home hero's darkening at the top (behind the header) and bottom (behind the text); ft-photo-hero gives any
   section over a photo the same look (the Coming soon and Maintenance pages). */
.ft-home-hero::after,
.ft-photo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			rgba(20, 31, 25, 0.5) 0%,
			rgba(20, 31, 25, 0.02) 38%
		),
		linear-gradient(
			0deg,
			rgba(20, 31, 25, 0.78) 0%,
			rgba(20, 31, 25, 0.02) 72%
		);
}

.ft-home-hero::after {
	opacity: var(--ft-hero-shade);
}

.ft-photo-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Like the home hero's second line: light gold italic. */
.ft-section-template .ft-photo-hero .ft-accent {
	color: var(--wp--preset--color--gold);
	font-weight: 300;
}

.ft-page-enter .ft-main {
	animation: ft-page-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ft-page-leaving .ft-main {
	opacity: 0;
	translate: 0 -12px;
	transition:
		opacity 0.3s ease,
		translate 0.3s ease;
}

@keyframes ft-page-out {
	to {
		opacity: 0;
		translate: 0 -12px;
	}
}

@keyframes ft-page-in {
	from {
		opacity: 0;
		translate: 0 18px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-page-enter .ft-main {
		animation: none;
	}

	.ft-page-leaving .ft-main {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* The loading bar (site.js): a wine line sliding along the top of the screen while a page opened from a link takes
   more than a moment to arrive. */
.ft-loading-bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 70;
	height: 3px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ft-loading-bar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	background: var(--color-wine, #713e3d);
	animation: ft-loading 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.ft-is-loading .ft-loading-bar {
	opacity: 1;
}

.ft-is-loading {
	cursor: progress;
}

body.admin-bar .ft-loading-bar {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ft-loading-bar {
		top: 46px;
	}
}

@keyframes ft-loading {
	from {
		translate: -100% 0;
	}

	to {
		translate: 250% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-loading-bar::before {
		width: 100%;
		animation: none;
	}
}

/* Native blocks retain the same layout in the editor and on the public page. */
.editor-styles-wrapper .wp-block-group.grid {
	display: grid;
}

.editor-styles-wrapper .wp-block-group.flex {
	display: flex;
}

.editor-styles-wrapper .botanical-mark {
	position: absolute !important;
	pointer-events: none;
}

.editor-styles-wrapper .botanical-mark .block-editor-block-variation-picker {
	display: none;
}

.editor-styles-wrapper
	.wp-block-group__placeholder:is(.absolute, .w-px)
	.block-editor-block-variation-picker {
	display: none;
}

.editor-styles-wrapper
	.wp-block-group__placeholder:is(.absolute, .w-px, .botanical-mark)
	> .components-placeholder {
	display: none;
}

.editor-styles-wrapper .service-panel h3 a::after {
	display: none;
}

.editor-styles-wrapper .wp-block.absolute {
	position: absolute !important;
}

.editor-styles-wrapper .ft-home-hero {
	--ft-screen: var(--ft-editor-viewport-height, 100vh);
}

.editor-styles-wrapper .ft-home-hero::after,
.editor-styles-wrapper .ft-photo-hero::after {
	z-index: 0;
}

.editor-styles-wrapper .ft-home-hero .wp-block-cover__inner-container,
.editor-styles-wrapper .ft-photo-hero .wp-block-cover__inner-container {
	z-index: 1;
}

.editor-styles-wrapper .ft-header {
	position: absolute !important;
	top: 0;
	color: var(--color-cream, #f3efe5);
	background: transparent;
}

.editor-styles-wrapper .ft-header .ft-wordmark {
	color: inherit;
}

.editor-styles-wrapper .is-root-container > .ft-header {
	position: relative !important;
	background: var(--color-ink, #263229);
}

.editor-styles-wrapper .wp-block-post-content {
	min-height: 8rem;
}

.editor-styles-wrapper .wp-block-fingertips-clinic-detail {
	overflow-wrap: normal;
}

/* Editorial text: article bodies (single.html) and Simple text pages. */
.ft-editorial-shell {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
}

.ft-editorial-content {
	font-size: 1.0625rem;
	line-height: 1.9;
	color: color-mix(in srgb, var(--color-ink, #263229) 85.1%, transparent);
}

.ft-editorial-content > * + * {
	margin-block-start: 1.5rem !important;
}

.ft-editorial-content :is(h2, h3, h4) {
	color: var(--color-ink, #263229);
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-weight: 400;
	line-height: 1.1;
	margin-block-start: 3rem !important;
}

.ft-editorial-content h2 {
	font-size: clamp(2.1rem, 3.5vw, 2.75rem);
}

.ft-editorial-content h3 {
	font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.ft-editorial-content h4 {
	font:
		600 0.7rem/1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-wine, #713e3d);
}

.ft-editorial-content :is(h2, h3, h4) + * {
	margin-block-start: 1rem !important;
}

.ft-editorial-content strong {
	color: var(--color-ink, #263229);
	font-weight: 600;
}

.ft-editorial-content a {
	color: var(--color-wine, #713e3d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.3s;
}

.ft-editorial-content a:hover {
	color: var(--color-ink, #263229);
}

.ft-editorial-content .wp-block-list {
	list-style: none;
	padding: 0;
}

.ft-editorial-content .wp-block-list li {
	position: relative;
	padding-left: 2rem;
}

.ft-editorial-content ul.wp-block-list > li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--color-wine, #713e3d);
}

.ft-editorial-content ol.wp-block-list {
	counter-reset: ft-list;
}

.ft-editorial-content ol.wp-block-list > li {
	counter-increment: ft-list;
}

.ft-editorial-content ol.wp-block-list > li::before {
	content: counter(ft-list, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.2em;
	color: var(--color-wine, #713e3d);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
}

.ft-editorial-content .wp-block-list li + li {
	margin-top: 0.6rem;
}

.ft-editorial-content :is(blockquote, .wp-block-quote) {
	margin-block: 2.75rem !important;
	padding: 0.25rem 0 0.25rem 1.75rem;
	border-left: 1px solid var(--color-wine, #713e3d);
}

.ft-editorial-content :is(blockquote, .wp-block-quote) p {
	color: var(--color-ink, #263229);
	font:
		italic 400 clamp(1.5rem, 2.6vw, 1.9rem)/1.35 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-editorial-content :is(blockquote, .wp-block-quote) cite {
	display: block;
	margin-top: 1rem;
	color: var(--color-wine, #713e3d);
	font:
		600 0.68rem/1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-editorial-content .wp-block-pullquote {
	border-block: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	padding: 2.5rem 0;
	text-align: center;
}

.ft-editorial-content
	:is(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed) {
	margin-block: 2.75rem !important;
}

.ft-editorial-content .wp-block-image img {
	height: auto;
}

.ft-editorial-content :is(figcaption, .wp-element-caption) {
	margin-top: 0.85rem;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.8rem;
	line-height: 1.6;
	text-align: left;
}

.ft-editorial-content .wp-block-separator {
	width: 4rem;
	margin-inline: 0;
	border: 0;
	border-top: 1px solid var(--color-wine, #713e3d);
	opacity: 1;
}

.ft-editorial-content :is(.wp-block-table, table) {
	font-size: 0.95rem;
}

.ft-editorial-content :is(th, td) {
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	padding: 0.75rem 0.5rem;
	text-align: left;
}

/* Questions in an article (core/details): a ruled list like the pages' FAQs. The whole question row opens it, and a
   ringed plus at its end, drawn here so questions typed in the editor get it too, turns into a cross when open. The
   answer keeps its distance from both. Padding sits on the summary and the answer's last block, not the details, so
   site.js measures the closed height as the summary's. */
.ft-editorial-content .wp-block-details {
	padding-block: 0;
	border-block: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 14.9%, transparent);
}

.ft-editorial-content > .wp-block-details + .wp-block-details {
	margin-block-start: 0 !important;
	border-top: 0;
}

.ft-editorial-content .wp-block-details summary {
	gap: 1.25rem;
	padding-block: 1.15rem;
	color: var(--color-ink, #263229);
	font-size: calc(
		clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) * var(--ft-hub-text-scale, 1)
	);
	line-height: 1.3;
	transition: color 0.2s ease;
}

.ft-editorial-content .wp-block-details summary:hover {
	color: var(--color-wine, #713e3d);
}

.ft-editorial-content .wp-block-details summary:focus-visible {
	outline: 2px solid var(--color-wine, #713e3d);
	outline-offset: 2px;
}

/* The imported "+" (inside the summary's text box in the editor) gives way to the drawn one. */
.ft-editorial-content .wp-block-details summary span.text-wine {
	display: none;
}

.ft-editorial-content .wp-block-details summary > .rich-text {
	flex: 1;
}

.ft-editorial-content .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid
		color-mix(in srgb, var(--color-wine, #713e3d) 34.9%, transparent);
	border-radius: 50%;
	color: var(--color-wine, #713e3d);
	background-image:
		linear-gradient(currentcolor, currentcolor),
		linear-gradient(currentcolor, currentcolor);
	background-position: center;
	background-repeat: no-repeat;
	background-size:
		0.8rem 1.5px,
		1.5px 0.8rem;
	transition:
		transform 0.38s ease,
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.ft-editorial-content .wp-block-details summary:hover::after,
.ft-editorial-content .wp-block-details[open] summary::after {
	border-color: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
	background-color: var(--color-wine, #713e3d);
}

.ft-editorial-content .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.ft-editorial-content .wp-block-details[data-ft-closing] summary::after {
	transform: none;
}

.ft-editorial-content .wp-block-details > :not(summary) {
	max-width: 42rem;
	margin-block: 0;
	padding-right: 3.75rem;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.9%, transparent);
}

.ft-editorial-content .wp-block-details > :not(summary) + :not(summary) {
	margin-top: 1rem;
}

.ft-editorial-content .wp-block-details > :last-child:not(summary) {
	padding-bottom: 1.5rem;
}

@media (max-width: 40rem) {
	.ft-editorial-content .wp-block-details > :not(summary) {
		padding-right: 0;
	}
}

/* Legal pages (content/legal/, on the Simple text template): they read like the documents they came from, with the
   company, website and effective date centred, then bold numbered headings close to the text's size, all smaller
   than an article's text. The Notice of Privacy Practices opens with its own centred title, as in the document. */
.ft-editorial-content .ft-legal :is(p, li) {
	font-size: 0.9375rem;
	line-height: 1.75;
}

.ft-legal.ft-legal > * + * {
	margin-block-start: 1rem;
}

.ft-legal .ft-legal-details {
	text-align: center;
}

.ft-legal .ft-legal-details > * {
	margin-block: 0.25rem 0 !important;
}

.ft-legal > .ft-legal-details:first-child {
	margin-block-end: 2.5rem;
}

.ft-editorial-content
	.ft-legal
	:is(.ft-legal-part, .ft-legal-section, .ft-legal-subsection) {
	font:
		600 1.35rem/1.2 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-ink, #263229);
	margin-block-start: 2rem !important;
}

.ft-editorial-content .ft-legal .ft-legal-part {
	font-size: clamp(1.6rem, 2.4vw, 1.9rem);
	margin-block-start: 3.5rem !important;
}

.ft-editorial-content .ft-legal :is(h2, h3) {
	scroll-margin-top: calc(var(--ft-hub-top) + 1rem);
}

/* "On this page" on Simple text pages (the legal pages): the hub article's list (.ft-hub-contents, whose own rules
   fold it above the text and, from 80rem, make it a sticky column), here beside the text, which keeps its width.
   The privacy policy lists more parts than a screen holds, so the column scrolls on its own. */
.ft-editorial-body.ft-editorial-body > .ft-editorial-content {
	margin-block-start: 0;
}

@media (min-width: 80rem) {
	.ft-editorial-shell:has(> .ft-editorial-body > .ft-hub-contents) {
		max-width: calc(60rem + var(--ft-hub-aside) + var(--ft-hub-aside-gap));
	}

	.ft-editorial-body:has(> .ft-hub-contents) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--ft-hub-aside);
		gap: var(--ft-hub-aside-gap);
		align-items: start;
	}

	.ft-editorial-body > .ft-editorial-content {
		grid-row: 1;
		grid-column: 1;
	}

	.ft-editorial-body > .ft-hub-contents {
		max-height: calc(100vh - var(--ft-hub-top) - 1rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Under the list (hub-reader.js): print the page, or a document within it, on its own. */
.ft-legal-print {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0 1.1rem 1rem;
}

.ft-legal-print .ft-hub-print {
	min-height: 1.9rem;
	padding-block: 0.35rem;
	border-radius: 1rem;
	line-height: 1.4;
	background: none;
	font-family: Manrope, "Manrope Fallback", sans-serif;
	text-align: left;
}

@media (min-width: 80rem) {
	.ft-legal-print {
		margin-top: 1.25rem;
		padding: 0;
	}
}

/* On paper a legal page is its text: no header, footer or reader tools, the title in ink, and headings kept with
   what follows them. Printing one document within it (hub-reader.js) leaves off what comes before it. */
@media print {
	body:has(.ft-legal)
		:is(
			header.wp-block-template-part,
			footer.wp-block-template-part,
			.ft-notice-bar
		),
	html.ft-printing-part .ft-editorial-hero,
	.ft-legal > .is-not-printed {
		display: none !important;
	}

	body:has(.ft-legal) .ft-editorial-hero {
		padding: 0 0 1.5rem !important;
		background: none !important;
		color: var(--color-ink, #263229) !important;
	}

	body:has(.ft-legal) .ft-editorial-hero h1 {
		font-size: 28pt !important;
	}

	body:has(.ft-legal) .ft-editorial-shell {
		max-width: none;
		padding: 0 !important;
	}

	.ft-editorial-content .ft-legal :is(p, li) {
		font-size: 10.5pt;
		line-height: 1.55;
	}

	.ft-legal :is(h2, h3, h4) {
		break-after: avoid;
	}

	.ft-legal > .ft-legal-details:not(:first-child) {
		break-before: page;
	}

	html.ft-printing-part .ft-legal > .ft-legal-details:not(:first-child) {
		break-before: auto;
		margin-top: 0 !important;
	}
}

.ft-editorial-content .ft-legal .ft-legal-details .ft-legal-part {
	margin-block-end: 0.75rem !important;
}

.ft-editorial-content .ft-legal .ft-legal-subsection {
	font-size: 1.15rem;
	margin-block-start: 1.5rem !important;
}

/* The footer's line of legal links, between the copyright and the closing tagline. */
.ft-footer-legal.ft-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.ft-footer-legal > * {
	margin: 0 !important;
}

/* On a page without visitor analytics (the plugin's Privacy\PrivateTopicPages), a quiet note says so: the last item
   of the legal links, or a line of its own at the foot of the footer if those links were removed. */
.ft-private-note--alone {
	margin: 0;
	padding: 0 clamp(1.5rem, 3vw, 3rem) 1.5rem;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	background: var(--wp--preset--color--cream, var(--color-cream, #f3efe5));
}

/* Article page. */
.ft-article-hero {
	padding: clamp(9rem, 14vw, 12rem) clamp(1.5rem, 5vw, 4rem)
		clamp(7rem, 11vw, 10rem);
}

.ft-article-hero-inner {
	max-width: 56rem;
	margin-inline: auto;
}

.ft-article-back {
	margin: 0;
}

.ft-article-back a {
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
	text-decoration: none;
	transition: color 0.3s;
}

.ft-article-back a:hover {
	color: #c9a96e;
}

.ft-article-title {
	margin-top: 2rem !important;
	font:
		400 clamp(3rem, 7vw, 6rem)/0.95 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ft-article-standfirst {
	max-width: 40rem;
	margin-top: 1.75rem !important;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 67.06%, transparent);
	font-size: 1.05rem;
	line-height: 1.85;
}

.ft-article-standfirst .wp-block-post-excerpt__more-text {
	display: none;
}

.ft-article-meta.ft-article-meta {
	margin-top: 2.5rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 14.9%, transparent);
	gap: 0.5rem 1.5rem;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-article-meta a {
	color: inherit;
	text-decoration: none;
}

.ft-article-meta a:hover {
	color: #c9a96e;
}

.ft-article {
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.ft-article-featured {
	max-width: 72rem;
	margin: calc(-1 * clamp(4rem, 7vw, 6rem)) auto 0 !important;
	position: relative;
}

.ft-article-featured img {
	width: 100%;
	object-fit: cover;
}

/* The paper sheet holds a reading column of about 70 characters: wide enough on a desktop, and nearly the whole
   screen on a phone, where the sheet loses its side border and padding. */
.ft-article-sheet {
	--ft-sheet-gutter: clamp(1.25rem, 7vw, 6rem);
	position: relative;
	max-width: 60rem;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0 !important;
	padding: clamp(2rem, 5vw, 4.5rem) var(--ft-sheet-gutter);
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	background: var(--color-paper, #e9e2d4);
}

.ft-article .ft-editorial-content {
	font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
	line-height: 1.75;
	color: color-mix(in srgb, var(--color-ink, #263229) 90.2%, transparent);
}

.ft-article-featured + .ft-article-sheet {
	margin-top: calc(-1 * clamp(2rem, 6vw, 5rem)) !important;
}

.ft-article > .ft-article-sheet:first-child {
	margin-top: calc(-1 * clamp(4rem, 7vw, 6rem)) !important;
}

.ft-article .ft-editorial-content > p:first-child {
	color: var(--color-ink, #263229);
	font:
		400 clamp(1.4rem, 2.4vw, 1.7rem)/1.5 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-article-footer.ft-article-footer {
	margin-top: 3.5rem !important;
	padding-top: 2rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	align-items: center;
	gap: 1.5rem;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.8rem;
}

.ft-article-footer a {
	color: var(--color-wine, #713e3d);
}

/* "Previous article" and "Next article" either side of "All news" at the end of an article; WordPress leaves each
   out where there is no such article (the oldest, the newest). */
.ft-article-end-actions.ft-article-end-actions {
	gap: 0.75rem;
}

.ft-previous-article:empty,
.ft-next-article:empty {
	display: none;
}

.ft-previous-article a,
.ft-next-article a {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 34.9%, transparent);
	border-radius: 999px;
	padding: 1rem 1.75rem;
	background: transparent;
	color: var(--color-ink, #263229);
	font:
		600 0.68rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-decoration: none;
	transition: all 0.3s;
}

.ft-previous-article a:hover,
.ft-next-article a:hover {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-previous-article a::before {
	content: "←" / "";
}

.ft-next-article a::after {
	content: "→" / "";
}

/* Service pages (single-fingertips_service.html): name, summary, prices and booking on the dark heading beside
   the photo; the text on the paper sheet; other services as cards. */
.ft-service-hero {
	padding: clamp(9rem, 14vw, 12rem) clamp(1.5rem, 5vw, 4rem)
		clamp(6rem, 10vw, 9rem);
}

.ft-service-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	max-width: 72rem;
	margin-inline: auto;
}

.ft-service-category {
	margin: 0;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
}

.ft-service-category a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.ft-service-category a:hover {
	color: #c9a96e;
}

.ft-service-title {
	margin-top: 1.5rem !important;
	font:
		400 clamp(3rem, 6vw, 5.5rem)/0.95 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ft-service-summary {
	max-width: 34rem;
	margin-top: 1.5rem !important;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 67.06%, transparent);
	font-size: 1.05rem;
	line-height: 1.85;
}

.ft-service-summary .wp-block-post-excerpt__more-text {
	display: none;
}

.ft-service-details {
	margin-top: 2.5rem !important;
}

.ft-service-prices {
	margin: 0 0 2rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 14.9%, transparent);
}

.ft-service-price {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 14.9%, transparent);
}

.ft-service-price dt {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-service-price dd {
	margin: 0;
}

.ft-service-length {
	grid-column: 1;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
	font-size: 0.85rem;
}

.ft-service-amount {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: #c9a96e;
	font:
		400 1.9rem/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-service-prices-empty {
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
	font-size: 0.85rem;
}

/* While prices are hidden: where to find them (ServiceDetailsRenderer). */
.ft-service-prices-note {
	margin: 0 0 2rem;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 76.86%, transparent);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ft-service-prices + .ft-service-prices-note {
	margin-top: -1rem;
}

.ft-service-prices-note :is(a, span) {
	color: var(--color-cream, #f3efe5);
	text-decoration: underline;
	text-decoration-color: #c9a96e;
	text-underline-offset: 0.2em;
}

.ft-service-prices-note a:hover {
	color: #c9a96e;
}

.ft-service-photo {
	margin: 0 !important;
}

.ft-service-photo img {
	width: 100%;
	object-fit: cover;
}

/* A service whose text is still empty shows no blank sheet. */
.ft-service-article:not(:has(.ft-editorial-content > *)) {
	display: none;
}

/* Tabs (the Tabs block, such as a service's Overview and What to expect). Saved as headings and their text, which is
   how they read without JavaScript; site.js adds the row of names (.ft-tabs-nav) and shows one tab at a time. The
   names look like the header menu's links: small capitals, faded until pointed at, and a line drawing itself under
   the one shown. On a narrow screen the names wrap onto more lines. The editor draws the same row (TabsEdit.js). */
.ft-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.25rem;
	margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important;
	padding: 0.45em 0 1.1rem;
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	font:
		600 0.65rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.ft-tabs-link,
.ft-tabs-add {
	position: relative;
	flex: none;
	margin: 0 0 0.45em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink, #263229);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
	opacity: 0.78;
	transition: opacity 0.3s ease;
}

.ft-tabs-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.45em;
	left: 0;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s ease;
}

.ft-tabs-link:is(:hover, :focus-visible, [aria-selected="true"], .is-active) {
	opacity: 1;
}

.ft-tabs-link:is(
		:hover,
		:focus-visible,
		[aria-selected="true"],
		.is-active
	)::after {
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ft-tabs-link:focus-visible {
	outline: none;
}

.ft-tabs-add {
	color: var(--color-wine, #713e3d);
}

.ft-tabs-add:hover {
	opacity: 1;
}

/* Before site.js turns a Tabs block into tabs (adding data-ft-tabs), show only its first tab when JavaScript is
   on, so the deferred script's collapse to one tab happens with no layout shift. Without JavaScript the ft-js class
   is never added and every tab stays open, which is how the block reads. */
html.ft-js .ft-tabs:not([data-ft-tabs]) > .ft-tab:not(:first-child) {
	display: none;
}

/* Once the names are a row of buttons, each tab's own heading is kept for screen readers only, so the headings
   inside it still sit under a second-level one. */
.ft-tabs[data-ft-tabs] > .ft-tab > .ft-tab-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ft-tabs[data-ft-tabs] > .ft-tab:focus-visible {
	outline: 2px solid var(--color-wine, #713e3d);
	outline-offset: 0.5rem;
}

.ft-tabs[data-ft-tabs] > .ft-tab:not([hidden]) {
	animation: ft-tab-in 0.5s ease both;
}

@keyframes ft-tab-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-tabs[data-ft-tabs] > .ft-tab:not([hidden]) {
		animation: none;
	}
}

.ft-tab + .ft-tab,
.ft-tab-body > * + * {
	margin-block-start: 1.5rem !important;
}

.ft-editorial-content .ft-tab-title + .ft-tab-body {
	margin-block-start: 1rem !important;
}

/* Each tab opens with the larger serif paragraph that leads an article. */
.ft-article .ft-tab-body > p:first-child {
	color: var(--color-ink, #263229);
	font:
		400 clamp(1.4rem, 2.4vw, 1.7rem)/1.5 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-service-more {
	max-width: 76rem;
	margin: 0 auto !important;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem)
		clamp(4rem, 8vw, 7rem);
}

.ft-service-index {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.ft-service-list-heading {
	margin: 0 0 2rem;
	color: var(--color-ink, #263229);
	font:
		400 clamp(2.1rem, 3.5vw, 2.75rem)/1.1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-service-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-service-tile a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem 1.25rem 1.75rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	background: var(--color-paper, #e9e2d4);
	color: var(--color-ink, #263229);
	text-decoration: none;
	transition:
		border-color 0.3s,
		background-color 0.3s;
}

.ft-service-tile a:hover {
	border-color: color-mix(
		in srgb,
		var(--color-ink, #263229) 34.9%,
		transparent
	);
	background: #e4dccb;
}

.ft-service-tile-media {
	display: block;
	margin-bottom: 1.25rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.ft-service-tile-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s;
}

.ft-service-tile a:hover .ft-service-tile-photo {
	transform: scale(1.03);
}

.ft-service-tile-category {
	color: var(--color-wine, #713e3d);
}

.ft-service-tile-title {
	margin-top: 0.6rem;
	font:
		400 1.75rem/1.1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-service-tile-summary {
	margin: 0.75rem 0 0;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.9rem;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.ft-service-hero-inner {
		grid-template-columns: 1fr;
	}
}

/* The Clinic Services & Pricing block: names link to each service's page without looking like links until pointed
   at. The numbered list takes its colors from the section around it. The Conditions block's numbered names link to
   each condition on What We Treat the same way. */
:is(
	.ft-pricing-link,
	.ft-service-card-link,
	.ft-service-row-link,
	.ft-condition-link
) {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

:is(.ft-pricing-link, .ft-service-card-link, .ft-condition-link):hover {
	color: var(--color-wine, #713e3d);
}

/* The columns of numbered condition names have no gap, so their rules run across both; room at the end of each row
   keeps a long name from running into the next column's number. */
.ft-condition-names > * {
	padding-inline-end: 1.5rem;
}

/* Digits of one width, so the names after 01…12 start in line. */
.ft-condition-names .ft-section-number {
	font-variant-numeric: tabular-nums;
}

/* The homepage's guide to the conditions (Conditions block, `guide`): the topic list's rows, closer together, each
   ending in a small "Read more" link. */
.ft-condition-guide.ft-condition-guide > .ft-t-split {
	margin-top: 2rem;
	margin-bottom: 0;
	padding-top: 1.75rem;
}

.ft-condition-guide.ft-condition-guide > .ft-t-split:first-child {
	margin-top: 0;
}

.ft-condition-guide .ft-guide-link {
	margin-top: 0.9rem;
	margin-bottom: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ft-condition-guide .ft-guide-link a {
	color: var(--color-wine, #713e3d);
	text-decoration: none;
}

.ft-condition-guide .ft-guide-link a:hover,
.ft-condition-guide .ft-guide-link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ft-condition-guide.ft-condition-guide > .ft-t-link-row {
	margin-top: 2.5rem;
}

/* Questions & Answers block: an answer ends with a link to the article holding the whole answer. */
.ft-faqs .ft-faq-article {
	margin: 0;
}

.ft-faqs .ft-faq-article a {
	color: var(--color-wine, #713e3d);
	text-underline-offset: 0.2em;
}

/* The space between an answer's paragraphs and lists (pt-4 is not among the reference app's Tailwind classes). */
.ft-faqs .pt-4 {
	padding-top: calc(var(--spacing) * 4);
}

/* An answer's bullet and numbered lists, typed in the Questions & answers editor. */
.ft-faqs .ft-faq-list {
	margin: 0;
	padding-left: 1.5em;
}

.ft-faqs ul.ft-faq-list {
	list-style: disc;
}

.ft-faqs ol.ft-faq-list {
	list-style: decimal;
}

.ft-faqs .ft-faq-list ul {
	list-style: circle;
	padding-left: 1.5em;
}

.ft-faqs .ft-faq-list ol {
	list-style: lower-alpha;
	padding-left: 1.5em;
}

.ft-faqs .ft-faq-list li::marker {
	color: var(--color-wine, #713e3d);
}

.ft-service-row-link:hover {
	color: #c9a96e;
}

.ft-service-rows {
	border-block: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
}

.ft-service-rows > * + * {
	border-top: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
}

.ft-service-row-number {
	margin: 0;
	font-size: 0.75rem;
	opacity: var(--ft-quiet-opacity);
}

.ft-service-row-summary {
	margin: 0;
	opacity: var(--ft-quiet-opacity);
}

/* "Follow by RSS" under the News introduction, after the feed symbol drawn in the link's color. */
.ft-feed-link {
	margin: 1.75rem 0 0 1.75rem !important;
}

.ft-feed-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
	text-decoration: none;
	transition: color 0.3s;
}

.ft-feed-link a::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='2.5'/%3E%3Cpath d='M3 10.5a10.5 10.5 0 0 1 10.5 10.5h-3A7.5 7.5 0 0 0 3 13.5zM3 3a18 18 0 0 1 18 18h-3A15 15 0 0 0 3 6z'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.ft-feed-link a:hover {
	color: #c9a96e;
}

.ft-article-author::before {
	content: "By ";
}

.ft-article-reading-time::after {
	content: " to read";
}

.ft-article-featured-caption {
	max-width: 60rem;
	margin: 0.85rem auto 0;
	padding-inline: clamp(1.25rem, 7vw, 6rem);
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.8rem;
	line-height: 1.6;
}

/* An article with a caption under its photo keeps the caption clear of the text sheet. */
.ft-article-featured:has(.ft-article-featured-caption) + .ft-article-sheet {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

/* Citations in an article's text: a small numbered link to its source in the References list. */
.ft-cite {
	font-size: 0.68em;
	font-weight: 600;
	line-height: 0;
	letter-spacing: 0.02em;
	vertical-align: super;
}

.ft-cite + .ft-cite {
	margin-left: 0.1em;
}

.ft-editorial-content .ft-cite a {
	text-decoration: none;
}

/* References: the numbered sources at the end of an article. */
.ft-editorial-content .ft-references {
	margin-block-start: 4rem !important;
	padding-top: 2rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-editorial-content .ft-references .ft-references-heading {
	margin: 0 !important;
	color: var(--color-wine, #713e3d);
	font:
		600 0.7rem/1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-references-list {
	counter-reset: ft-source;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.85rem;
	line-height: 1.7;
}

.ft-references-list .ft-reference {
	position: relative;
	counter-increment: ft-source;
	padding-left: 2.25rem;
	scroll-margin-top: 8rem;
	overflow-wrap: anywhere;
}

.ft-references-list .ft-reference + .ft-reference {
	margin-top: 0.85rem;
}

.ft-references-list .ft-reference::before {
	content: counter(ft-source) ".";
	position: absolute;
	left: 0;
	color: var(--color-wine, #713e3d);
	font-weight: 600;
}

/* Notes: footnotes that explain a point, lettered as their citations are ([a]), in a list of their own. */
.ft-notes .ft-references-list .ft-reference::before {
	content: counter(ft-source, lower-alpha) ".";
}

.ft-editorial-content .ft-references + .ft-references {
	margin-block-start: 2.5rem !important;
}

@media (max-width: 639px) {
	.ft-article {
		padding-inline: 0;
	}

	.ft-article-sheet {
		--ft-sheet-gutter: 1.375rem;
		border-inline: 0;
	}

	.ft-article-featured-caption {
		padding-inline: 1.375rem;
	}
}

.ft-button-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-ink, #263229);
	border-color: color-mix(
		in srgb,
		var(--color-ink, #263229) 34.9%,
		transparent
	);
}

.ft-button-outline .wp-block-button__link:hover {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
	border-color: var(--color-ink, #263229);
}

.ft-post-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 52rem;
	margin-inline: auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.ft-post-navigation:not(:has(a)) {
	display: none;
}

.ft-post-navigation > * {
	margin: 0 !important;
}

.ft-post-navigation .wp-block-post-navigation-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
	transition:
		background 0.3s,
		border-color 0.3s;
}

.ft-post-navigation .wp-block-post-navigation-link:empty {
	display: none;
}

.ft-post-navigation .wp-block-post-navigation-link:hover {
	background: var(--color-paper, #e9e2d4);
	border-color: color-mix(
		in srgb,
		var(--color-ink, #263229) 25.1%,
		transparent
	);
}

.ft-post-navigation .post-navigation-link__label {
	color: var(--color-wine, #713e3d);
	font:
		600 0.66rem/1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-post-navigation .wp-block-post-navigation-link a {
	color: var(--color-ink, #263229);
	font:
		400 1.6rem/1.15 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	text-decoration: none;
}

.ft-post-navigation .wp-block-post-navigation-link a::after {
	content: "";
	position: absolute;
	inset: 0;
} /* the whole card is clickable */
.ft-post-navigation .post-navigation-link-next {
	grid-column: 2;
	text-align: right;
}

.ft-article-cta {
	padding: clamp(5rem, 9vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
	text-align: center;
}

.ft-article-cta .eyebrow {
	justify-content: center;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 70.2%, transparent);
}

.ft-article-cta-title {
	margin-top: 1.5rem !important;
	font:
		400 clamp(2.75rem, 5.5vw, 4.5rem)/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-article-cta-text {
	max-width: 34rem;
	margin: 1.5rem auto 0 !important;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 76.86%, transparent);
	line-height: 1.85;
}

.ft-article-cta .ft-buttons {
	margin-top: 2.5rem !important;
}

@media (max-width: 639px) {
	.ft-post-navigation {
		grid-template-columns: minmax(0, 1fr);
	}

	.ft-post-navigation .post-navigation-link-next {
		grid-column: auto;
	}
}

/* Comments: hidden unless switched on for a post (Post sidebar → Discussion), then styled like the site. */
.ft-article-comments {
	max-width: 52rem;
	margin-inline: auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.ft-article-comments:not(
	:has(.wp-block-comments-title, .comment-respond, .wp-block-comment-template)
) {
	display: none;
}

.ft-article-comments .wp-block-comments {
	padding: clamp(2rem, 5vw, 3.5rem);
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-article-comments :is(.wp-block-comments-title, .comment-reply-title) {
	margin: 0 0 1.5rem;
	font:
		400 clamp(1.9rem, 3vw, 2.4rem)/1.15 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-article-comments .wp-block-comment-template {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.ft-article-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0 0 0 clamp(1rem, 3vw, 2rem);
	list-style: none;
	border-left: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-comment {
	padding: 1.5rem 0;
	border-top: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-comment-meta.ft-comment-meta {
	gap: 0.25rem 1rem;
	align-items: baseline;
}

.ft-comment .wp-block-comment-author-name {
	color: var(--color-ink, #263229);
	font-weight: 600;
	font-size: 0.95rem;
}

.ft-comment .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.ft-comment .wp-block-comment-date {
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ft-comment .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

.ft-comment .wp-block-comment-content {
	margin-top: 0.75rem !important;
	color: color-mix(in srgb, var(--color-ink, #263229) 85.1%, transparent);
	line-height: 1.8;
}

.ft-comment .wp-block-comment-reply-link {
	margin-top: 0.75rem !important;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ft-comment .wp-block-comment-reply-link a {
	color: var(--color-wine, #713e3d);
	text-decoration: none;
}

.ft-article-comments .comment-respond {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-article-comments .wp-block-comment-template + * .comment-respond,
.ft-article-comments .wp-block-comments-title ~ .comment-respond {
	margin-top: 1rem;
}

.ft-article-comments .comment-reply-title small {
	margin-left: 1rem;
	font:
		600 0.66rem Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ft-article-comments .comment-reply-title small a {
	color: var(--color-wine, #713e3d);
	text-decoration: none;
}

.ft-article-comments .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.ft-article-comments .comment-form > p {
	grid-column: 1 / -1;
	margin: 0;
}

.ft-article-comments
	.comment-form
	:is(.comment-form-author, .comment-form-email) {
	grid-column: auto;
}

.ft-article-comments
	:is(
		.comment-notes,
		.logged-in-as,
		.comment-awaiting-moderation,
		.no-comments
	) {
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.85rem;
	line-height: 1.7;
}

.ft-article-comments :is(.logged-in-as, .comment-notes) a {
	color: var(--color-wine, #713e3d);
}

.ft-article-comments .comment-form label {
	display: block;
	margin-bottom: 0.5rem;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ft-article-comments
	.comment-form
	:is(textarea, input:not([type="checkbox"]):not([type="submit"])) {
	display: block;
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 20%, transparent);
	border-radius: 0;
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
	font: inherit;
	font-size: 1rem;
	transition:
		border-color 0.3s,
		background 0.3s;
}

.ft-article-comments .comment-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.ft-article-comments .comment-form :is(textarea, input):focus {
	outline: none;
	border-color: var(--color-wine, #713e3d);
	background: #fff;
}

.ft-article-comments .comment-form-cookies-consent {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.85rem;
}

.ft-article-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.ft-article-comments .comment-form-cookies-consent input {
	accent-color: var(--color-wine, #713e3d);
	margin-top: 0.25rem;
}

.ft-article-comments .form-submit [type="submit"] {
	border: 1px solid var(--color-wine, #713e3d);
	border-radius: 999px;
	padding: 1rem 1.75rem;
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
	font:
		600 0.68rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}

.ft-article-comments .form-submit [type="submit"]:hover {
	background: transparent;
	color: var(--color-wine, #713e3d);
}

@media (max-width: 639px) {
	.ft-article-comments
		.comment-form
		:is(.comment-form-author, .comment-form-email) {
		grid-column: 1 / -1;
	}
}

.ft-journal-shell {
	max-width: 90rem;
	margin-inline: auto;
}

.ft-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.ft-journal-grid .wp-block-post {
	min-width: 0;
}

.ft-journal-grid .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.ft-journal-grid .wp-block-read-more {
	display: inline-block;
	margin-top: 1.5rem;
}

/* A section without a photo or video shows its color at full strength, even when saved with a tint (older
   sections used 40%). Doubled class: core's `.has-background-dim-40` opacity rule is more specific otherwise. */
.ft-flexible-section.ft-flexible-section:not(
		:has(
			> .wp-block-cover__image-background,
			> .wp-block-cover__video-background
		)
	)
	> .wp-block-cover__background {
	opacity: 1;
}

.ft-flexible-section .wp-block-cover__inner-container {
	width: 100%;
}

@media (max-width: 1023px) {
	.ft-card-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1023px) {
	.ft-journal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.ft-journal-grid {
		grid-template-columns: 1fr;
	}
}

/* Layout section templates: every tone derives from the section's chosen text color. */
.ft-section-template .ft-muted,
.ft-section-template .ft-muted a {
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
}

.ft-section-template .ft-accent {
	display: block;
	font-style: italic;
	color: color-mix(in srgb, currentcolor 78%, transparent);
}

.ft-section-template .ft-side-note {
	border-left: 1px solid color-mix(in srgb, currentcolor 22%, transparent);
	padding-left: 1.75rem;
}

.ft-section-template .ft-number {
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
}

.ft-section-template .ft-t-card {
	border: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
	background: color-mix(in srgb, currentcolor 4%, transparent);
}

.ft-section-template .ft-t-rule {
	border-top: 1px solid color-mix(in srgb, currentcolor 18%, transparent);
	padding-top: 1.75rem;
}

.ft-section-template .ft-t-row {
	border-bottom: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
	padding-block: 1.25rem;
}

.ft-section-template .ft-t-center {
	text-align: center;
}

.ft-section-template .ft-t-center .eyebrow,
.ft-section-template .ft-t-center .ft-buttons {
	justify-content: center;
}

.ft-section-template .ft-t-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ft-section-template .ft-t-detail {
	margin-top: 2.5rem;
	white-space: pre-line;
	font:
		1.875rem/2.5rem "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-section-template .ft-t-link-row {
	margin-top: 2rem;
}

.ft-section-template .ft-t-link-row a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid color-mix(in srgb, currentcolor 18%, transparent);
	padding-top: 1.25rem;
	color: inherit;
	text-decoration: none;
	font:
		600 0.65rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.ft-section-template .ft-t-faq-list {
	border-top: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
}

.ft-section-template .ft-t-faq {
	border-bottom: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
	padding-block: 1.5rem;
}

/* A topic's folding list of concerns (What We Treat): a ruled small-capitals question opening a dashed list, each
   concern's name in ink. The class is doubled so the layout's own margins do not win. */
.ft-section-template .ft-t-concerns.ft-t-concerns {
	margin-block: 1.5rem 0;
	border-block: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
}

.ft-section-template .ft-t-concerns summary {
	padding-block: 1.1rem;
	font:
		600 0.65rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.ft-section-template .ft-t-concerns summary span {
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0;
}

/* In the editor the label and the + share one text box; float keeps the + at the right as on the page. */
.ft-section-template .ft-t-concerns summary > .rich-text {
	flex: 1;
}

.ft-section-template .ft-t-concerns summary > .rich-text span {
	float: right;
}

.ft-section-template .ft-t-concern-list.ft-t-concern-list {
	margin-block: 0;
	padding: 0 0 1.5rem;
	list-style: none;
	font-size: 1rem;
	line-height: 1.85;
}

.ft-section-template .ft-t-concern-list li {
	position: relative;
	padding-left: 1.75rem;
	color: color-mix(in srgb, currentcolor 72%, transparent);
}

.ft-section-template .ft-t-concern-list li + li {
	margin-top: 0.75rem;
}

.ft-section-template .ft-t-concern-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--color-wine, #713e3d);
}

.ft-section-template .ft-t-concern-list strong {
	color: var(--color-ink, #263229);
	font-weight: 600;
}

.ft-section-template .ft-t-checklist {
	list-style: none;
	padding: 0;
}

/* flex keeps the dash on the same line as the editor's text box */
.ft-section-template .ft-t-checklist li {
	display: flex;
	gap: 0.4em;
	border-bottom: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
	padding-block: 1rem;
	color: color-mix(in srgb, currentcolor 72%, transparent);
}

.ft-section-template .ft-t-checklist li::before {
	content: "—";
	flex: none;
}

.ft-section-template .ft-t-checklist li > * {
	flex: 1;
	min-width: 0;
}

.ft-section-template .ft-t-phone a {
	color: inherit;
	font-size: 0.875rem;
}

.ft-button.ft-button-auto .wp-block-button__link,
.ft-contact-button.ft-button-auto a {
	background: transparent;
	color: inherit;
	border-color: color-mix(in srgb, currentcolor 45%, transparent);
}

.ft-button.ft-button-auto .wp-block-button__link:hover,
.ft-contact-button.ft-button-auto a:hover {
	background: color-mix(in srgb, currentcolor 12%, transparent);
	color: inherit;
}

.ft-section-template .ft-journal-grid {
	gap: 1.5rem;
}

.ft-section-template .ft-t-split {
	display: grid;
	gap: 3rem clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.ft-section-template .ft-t-split > * {
	min-width: 0;
	margin: 0;
}

.ft-section-template .ft-t-split-bottom {
	align-items: end;
}

.ft-section-template .ft-t-split-center {
	align-items: center;
}

@media (min-width: 1024px) {
	.ft-t-split-30 {
		grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	}

	.ft-t-split-32 {
		grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
	}

	.ft-t-split-34 {
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
	}

	.ft-t-split-36 {
		grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
	}

	.ft-t-split-45 {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	}

	.ft-t-split-48 {
		grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
	}

	.ft-t-split-62 {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	}

	.ft-t-split-65 {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	}
}

/* Topic list: on phones a topic's text sits close under its heading. */
.ft-section-template.ft-layout-topics .ft-t-split {
	row-gap: 1.25rem;
}

/* Its text keeps a readable line length beside the heading. */
.ft-section-template.ft-layout-topics .ft-t-split > :last-child {
	max-width: 46rem;
}

/* Contact cards (the Contact page's Visit, Contact and Hours; class added by migration 0011): a thin-line icon in a
   ring at the top right, a faint botanical ring in the corner, and on hover a small lift, a soft shadow, a wine line
   drawn across the top and the link row turning wine with its arrow moving on. */
.ft-contact-card {
	position: relative;
	overflow: hidden;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 10.2%, transparent);

	/* The wine line along the top, drawn on hover (the card's color stays its background color). */
	background-image: linear-gradient(
		var(--color-wine, #713e3d),
		var(--color-wine, #713e3d)
	);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 0 2px;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		border-color 0.4s ease,
		background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ft-contact-card::before {
	content: "";
	position: absolute;
	top: clamp(1.75rem, 3vw, 2.5rem);
	right: clamp(1.75rem, 3vw, 2.5rem);
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 20%, transparent);
	border-radius: 50%;
	background: var(--ft-contact-icon) center / 1.25rem no-repeat;
}

.ft-contact-card--visit {
	--ft-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713e3d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}

.ft-contact-card--contact {
	--ft-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713e3d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.ft-contact-card--hours {
	--ft-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713e3d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

/* The faint ring in the lower corner, like the botanical marks on the dark headings. */
.ft-contact-card::after {
	content: "";
	position: absolute;
	right: -7rem;
	bottom: -7rem;
	width: 16rem;
	height: 16rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 5.88%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 2.5rem
		color-mix(in srgb, var(--color-ink, #263229) 1.96%, transparent);
	pointer-events: none;
}

.ft-contact-card > * {
	position: relative;
	z-index: 1;
}

.ft-contact-card:is(:hover, :focus-within) {
	background-size: 100% 2px;
	border-color: color-mix(
		in srgb,
		var(--color-wine, #713e3d) 20%,
		transparent
	);
	box-shadow: 0 1.5rem 3rem #0b100c14;
	transform: translateY(-4px);
}

.ft-contact-card a,
.ft-contact-card a [aria-hidden="true"] {
	transition:
		transform 0.3s ease,
		color 0.3s ease;
}

.ft-contact-card:is(:hover, :focus-within) a [aria-hidden="true"] {
	display: inline-block;
	transform: translateX(0.3rem);
}

.ft-contact-card:is(:hover, :focus-within) a {
	color: var(--color-wine, #713e3d);
}

@media (prefers-reduced-motion: reduce) {
	.ft-contact-card,
	.ft-contact-card [aria-hidden="true"] {
		transition: none;
	}

	.ft-contact-card:is(:hover, :focus-within) {
		transform: none;
	}
}

/* Clinic Map (Maps\ClinicMap): a picture kept on the server, shown one to one and cropped around the pin, which
   sits at its centre; it links to Google Maps directions. Large spans the section under the cards, small sits in
   the Visit card. OpenStreetMap's credit goes underneath. */
.ft-clinic-map {
	margin: 1.25rem 0 0;
}

.ft-clinic-map__link {
	position: relative;
	display: block;
	overflow: hidden;
	height: clamp(17rem, 34vw, 30rem);
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12%, transparent);
	background: var(--color-paper, #e9e2d4);
	color: inherit;
	text-decoration: none;
}

.ft-clinic-map--small .ft-clinic-map__link {
	height: 12rem;
}

.ft-clinic-map__image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100% !important;

	/* The file is drawn at twice this size, so it stays sharp on 2× screens; cover centres it on the pin. */
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-clinic-map__link:is(:hover, :focus-visible) .ft-clinic-map__image {
	transform: scale(1.02);
}

.ft-clinic-map__link:focus-visible {
	outline: 2px solid var(--color-wine, #713e3d);
	outline-offset: 3px;
}

.ft-clinic-map__cta {
	position: absolute;
	bottom: clamp(1rem, 2vw, 1.5rem);
	left: clamp(1rem, 2vw, 1.5rem);
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.85rem 1.15rem;
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.3s ease;
}

.ft-clinic-map__arrow {
	transition: transform 0.3s ease;
}

.ft-clinic-map__link:is(:hover, :focus-visible) .ft-clinic-map__cta {
	background: var(--color-wine, #713e3d);
}

.ft-clinic-map__link:is(:hover, :focus-visible) .ft-clinic-map__arrow {
	transform: translateX(0.3rem);
}

/* The clinic's name beside the pin, whose head is 26px above the centre of the picture. */
.ft-clinic-map__label {
	position: absolute;
	top: calc(50% - 26px);
	left: calc(50% + 22px);
	max-width: calc(50% - 2rem);
	padding: 0.45rem 0.7rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 14%, transparent);
	background: var(--color-cream, #f3efe5);
	box-shadow: 0 0.5rem 1.25rem #0b100c1f;
	color: var(--color-ink, #263229);
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.15;
	transform: translateY(-50%);
}

@media (max-width: 40rem) {
	.ft-clinic-map__label {
		font-size: 0.85rem;
	}
}

.ft-clinic-map__credit {
	margin-top: 0.5rem;
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
	font-size: 0.7rem;
	text-align: right;
}

.ft-clinic-map__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ft-contact-card .ft-clinic-map {
	margin-top: 2rem;
}

.ft-clinic-map-note {
	padding: 1.5rem;
	border: 1px dashed currentcolor;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	.ft-clinic-map__image,
	.ft-clinic-map__cta,
	.ft-clinic-map__arrow {
		transition: none;
	}

	.ft-clinic-map__link:is(:hover, :focus-visible) .ft-clinic-map__image {
		transform: none;
	}
}

/* Policy or legal text: the date and contact column stays in view beside a long policy on wide screens. */
@media (min-width: 1024px) {
	.ft-layout-policy .ft-t-split > :first-child {
		position: sticky;
		top: 8rem;
	}
}

.ft-section-template .ft-policy-sheet {
	max-width: 52rem;
	background: color-mix(in srgb, #fff 55%, transparent);
}

/* Bullet lists in a policy part: wine dashes like the article lists, nested lists indented under their item. */
.ft-policy-sheet .wp-block-list {
	margin-block: 1rem 0;
	padding: 0;
}

.ft-policy-sheet .wp-block-list li {
	position: relative;
	padding-left: 1.75rem;
}

.ft-policy-sheet .wp-block-list li + li {
	margin-top: 0.5rem;
}

.ft-policy-sheet .wp-block-list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--color-wine, #713e3d);
}

.ft-policy-sheet .wp-block-list .wp-block-list {
	margin-top: 0.5rem;
}

.ft-policy-sheet .wp-block-list strong {
	color: var(--color-ink, #263229);
	font-weight: 600;
}

.ft-policy-sheet .wp-block-list a {
	color: var(--color-wine, #713e3d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* News pagination: pill controls matching the site's buttons. */
.wp-block-query-pagination {
	align-items: center;
	gap: 1.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid color-mix(in srgb, currentcolor 15%, transparent);
	font:
		600 0.68rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.wp-block-query-pagination a {
	color: inherit;
	text-decoration: none;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
	border-radius: 999px;
	padding: 0.9rem 1.6rem;
	transition:
		background 0.3s,
		color 0.3s,
		border-color 0.3s;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--color-wine, #713e3d);
	border-color: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
}

.wp-block-query-pagination-next {
	margin-left: auto;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
	margin: 0 auto;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	font:
		italic 1.25rem/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: 0;
	text-transform: none;
	color: color-mix(in srgb, currentcolor 65%, transparent);
	transition:
		background 0.3s,
		color 0.3s;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	background: color-mix(in srgb, currentcolor 8%, transparent);
	color: inherit;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
	font-style: normal;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: auto;
}

@media (max-width: 639px) {
	.wp-block-query-pagination-numbers {
		display: none;
	}

	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		padding: 0.8rem 1.2rem;
	}
}

.wp-block-query-pagination.wp-block-query-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.wp-block-query-pagination > .wp-block-query-pagination-previous {
	grid-column: 1;
	justify-self: start;
}

.wp-block-query-pagination > .wp-block-query-pagination-numbers {
	grid-column: 2;
	margin: 0;
}

.wp-block-query-pagination > .wp-block-query-pagination-next {
	grid-column: 3;
	justify-self: end;
	margin: 0;
}

@media (max-width: 639px) {
	.wp-block-query-pagination.wp-block-query-pagination {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* The type scale (theme.json font sizes, named in the editor's size picker). A heading added without a size of its
   own gets its level's size, and text without a size of its own is body text (set on the page content, so text
   inside a block that sets a size keeps it). Headings and text that set their own size, through the picker, a
   section's layout or the original design's classes, are left alone. */
:where(.wp-block-post-content) {
	font-size: var(--wp--preset--font-size--body);
}

:where(.wp-block-post-content)
	:is(h1, h2, h3, h4, h5):where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-weight: 400;
}

:where(.wp-block-post-content)
	h1:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-size: var(--wp--preset--font-size--page-title);
	line-height: 0.9;
}

:where(.wp-block-post-content)
	h2:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-size: var(--wp--preset--font-size--heading-section);
	line-height: 1;
}

:where(.wp-block-post-content)
	h3:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-size: var(--wp--preset--font-size--heading-card);
	line-height: 1.1;
}

:where(.wp-block-post-content)
	h4:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-size: var(--wp--preset--font-size--heading-small);
	line-height: 1.2;
}

:where(.wp-block-post-content)
	h5:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

:where(.wp-block-post-content)
	h6:where(
		:not([class*="-font-size"], [class*="text-"], [style*="font-size"])
	) {
	font:
		600 var(--wp--preset--font-size--label) / 1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Plain blocks typed directly on a section-built page: keep them readable and clear of the fixed header. */
.ft-main
	> .wp-block-post-content
	> :not(.alignfull):not([data-align="full"]):not(section):not(
		.ft-section-template
	):not(.wp-block-cover):not(.wp-block-group):not(
		.wp-block-fingertips-interaction-checker
	) {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	box-sizing: content-box;
}

.ft-main
	> .wp-block-post-content
	> :not(.alignfull):not([data-align="full"]):not(section):not(
		.ft-section-template
	):not(.wp-block-cover):not(.wp-block-group):first-child {
	padding-top: 9rem;
}

.ft-main
	> .wp-block-post-content
	> :not(.alignfull):not([data-align="full"]):not(section):not(
		.ft-section-template
	):not(.wp-block-cover):not(.wp-block-group):last-child {
	padding-bottom: 6rem;
}

/* Beat the editor's generated layout gap so post grids space identically in both places. */
.wp-block-post-template.ft-journal-grid.is-layout-grid {
	gap: 2rem;
}

.ft-section-template .wp-block-post-template.ft-journal-grid.is-layout-grid {
	gap: 1.5rem;
}

/* Phones: the hero's one-column grid must not grow to the width of its longest word. */
@media (max-width: 639px) {
	.ft-home-hero .grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ft-home-hero h1 {
		font-size: clamp(3rem, 15.5vw, 4.5rem);
	}

	.ft-section-template h1 {
		overflow-wrap: break-word;
	}
}

/* Search box on the dark search-results banner. */
.ft-editorial-hero .wp-block-search {
	max-width: 40rem;
	margin-left: 0 !important;
}

.ft-editorial-hero .wp-block-search__inside-wrapper {
	gap: 0.75rem;
	border: 0;
	padding: 0;
}

.ft-editorial-hero .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.9rem 1.25rem;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 25.1%, transparent);
	border-radius: 999px;
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 7.84%,
		transparent
	);
	color: var(--color-cream, #f3efe5);
	font: inherit;
	font-size: 0.95rem;
	transition:
		border-color 0.3s,
		background 0.3s;
}

.ft-editorial-hero .wp-block-search__input::placeholder {
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 60%, transparent);
}

.ft-editorial-hero .wp-block-search__input:focus {
	outline: none;
	border-color: #c9a96e;
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 12.16%,
		transparent
	);
}

.ft-editorial-hero .wp-block-search__button {
	margin: 0;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 45.1%, transparent);
	border-radius: 999px;
	padding: 0.9rem 1.75rem;
	background: transparent;
	color: var(--color-cream, #f3efe5);
	font:
		600 0.68rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}

.ft-editorial-hero .wp-block-search__button:hover {
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
}

/* The WordPress top bar (shown to logged-in users) in the site's font; its own stylesheet sets a font on every element. */
html #wpadminbar,
html #wpadminbar * {
	font-family:
		Manrope,
		"Manrope Fallback",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}

/* Clinic Detail "Phone and email": two tappable lines. The phone keeps the block's size; the email is set smaller in the
   text font and may wrap, so long addresses never overflow their card. */
.wp-block-fingertips-clinic-detail .ft-detail-phone,
.wp-block-fingertips-clinic-detail .ft-detail-email {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wp-block-fingertips-clinic-detail .ft-detail-email {
	margin-top: 0.75rem;
	font-family: Manrope, "Manrope Fallback", sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
	opacity: 0.75;
}

.wp-block-fingertips-clinic-detail
	:is(.ft-detail-phone, .ft-detail-email):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* "or call (571) 279-8126" beside a booking button. */
.ft-detail-call a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Page sections are link targets (/book/#pricing): stop below the fixed header when the browser jumps to one. */
.ft-main .wp-block-post-content > [id] {
	scroll-margin-top: 6rem;
}

/* The highlights banner slides by one set of phrases per loop; site.js sets the distance and duration after
   repeating the phrases to fill the screen. The fallback (half the track) is the reference design's. */
.luxury-marquee {
	animation-name: ft-marquee;
	animation-duration: var(--ft-marquee-duration, 34s);
}

@media (prefers-reduced-motion: reduce) {
	.luxury-marquee {
		animation: none;
	}

	.ft-marquee-pause {
		display: none;
	}
}

.ft-marquee-banner {
	position: relative;
}

.ft-marquee-banner:is(:hover, :focus-within, .is-paused) .luxury-marquee {
	animation-play-state: paused;
}

/* Two bars, or a play triangle once paused, in a small ring at the banner's end. */
.ft-marquee-pause {
	position: absolute;
	top: 50%;
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentcolor 45%, transparent);
	border-radius: 50%;
	background: var(--color-paper, var(--color-paper, #e9e2d4));
	color: var(--color-ink, #263229);
	cursor: pointer;
	translate: 0 -50%;
}

.ft-marquee-pause::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7h2v10H9zM13 7h2v10h-2z'/%3E%3C/svg%3E")
		center / 70% no-repeat;
}

.ft-marquee-banner.is-paused .ft-marquee-pause::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7v10l8-5z'/%3E%3C/svg%3E");
}

.ft-marquee-pause:focus-visible {
	outline: 2px solid var(--color-wine, #713e3d);
	outline-offset: 2px;
}

@keyframes ft-marquee {
	to {
		transform: translateX(var(--ft-marquee-shift, -50%));
	}
}

/* The Home hero heading's line height (0.78) is tighter than its letters, so the descenders of "quality." hang about
   0.21em below the box and ate the gap to the line under it. Room for them keeps that gap clear. */
.wp-block-heading[class*="leading-[0.78]"] {
	padding-bottom: 0.21em;
}

/* Service cards and conditions are link targets too (Home's treatment cards point at the cards, the Services
   page's conditions at What We Treat). */
.ft-main :is(.ft-service-card, .ft-conditions > *)[id] {
	scroll-margin-top: 6rem;
}

/* Section Shortcuts: a row of outlined pills under a page's opening section, one per section further down. They
   take the section's text color, so they suit dark and light sections alike. The class is doubled to beat the
   layout rule that zeroes top margins in flow layouts. */
.ft-shortcuts.ft-shortcuts {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	max-width: 90rem;
	margin: 3.5rem auto 0;
}

.ft-shortcuts__label {
	margin: 0;
	font:
		600 0.62rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: 0.6;
}

.ft-shortcuts__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ft-shortcut {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.15rem;
	border: 1px solid color-mix(in srgb, currentcolor 32%, transparent);
	border-radius: 999px;
	color: inherit;
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 0.3s,
		border-color 0.3s;
}

.ft-shortcut::after {
	content: "↓";
	letter-spacing: 0;
	opacity: 0.55;
	transition: transform 0.3s;
}

a.ft-shortcut:is(:hover, :focus-visible) {
	border-color: currentcolor;
	background: color-mix(in srgb, currentcolor 10%, transparent);
}

a.ft-shortcut:is(:hover, :focus-visible)::after {
	transform: translateY(2px);
}

.ft-shortcuts__empty {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.6;
}

/* Header overlays (Navigation submenus). On desktop an item with overlay items opens a panel across the page under
   the header, and the page behind dims: each overlay item with links of its own is a column (its label a small
   heading over the links), and one without is a link of the same size. site.js opens it (class is-open) when the pointer rests
   on the item a moment, and from the keyboard; without JavaScript, hover and focus open it. The item itself still
   opens its page. The arrow is only for the phone menu.
   Core positions and collapses submenus itself; the tripled class lets these rules win. The phone menu is below. */
.ft-navigation .wp-block-navigation__submenu-icon {
	width: 0.6rem;
	height: 0.6rem;
	margin-left: 0.3rem;
	opacity: 0.65;
}

/* The arrow follows the overlay (not core's aria-expanded flag, which can stay set after the pointer leaves),
   turning about the chevron's own centre so it stays level with the capital letters beside it. */
.ft-navigation.ft-navigation .wp-block-navigation__submenu-icon svg {
	margin-top: 0;
	transform: none;
	transform-origin: 50% 52%;
	transition: transform 0.3s ease;
}

/* A header item that links nowhere (Site menu: "Nothing (only opens its overlay)") is a button that looks like
   its neighbours. */
.ft-navigation.ft-navigation button.wp-block-navigation-item__content {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	opacity: 0.8;
}

.ft-navigation.ft-navigation
	button.wp-block-navigation-item__content:is(
		:hover,
		[aria-expanded="true"]
	) {
	opacity: 1;
}

/* The panel is cream under the dark header and, once the header turns cream on scroll, a lighter paper so it still
   stands out. */
@media (min-width: 1024px) {
	.ft-header {
		--ft-menu-sheet: var(--color-cream, #f3efe5);
	}

	.ft-header.is-scrolled {
		--ft-menu-sheet: #fffdf8;
	}

	/* The page behind an open overlay dims. */
	.ft-header::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: -1;
		height: 100vh;
		background: #0b100c73;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition:
			opacity 0.3s ease,
			visibility 0s linear 0.3s;
	}

	.ft-header:has(
			.ft-navigation .has-child:not(.ft-menu-small).is-open
		)::after {
		visibility: visible;
		opacity: 1;
		transition:
			opacity 0.3s ease-out,
			visibility 0s;
	}

	/* The overlay hangs from the header, across the whole width, not from the item or core's menu wrappers. */
	.ft-navigation.ft-navigation.ft-navigation,
	.ft-navigation.ft-navigation.ft-navigation
		:is(
			.wp-block-navigation__responsive-container,
			.wp-block-navigation__responsive-dialog,
			.wp-block-navigation__container,
			.wp-block-navigation__container > .has-child
		) {
		position: static;
	}

	/* No arrow: pointing at the item opens its overlay, and clicking it opens its page. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-icon {
		display: none;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 2.5rem 3rem;
		align-items: start;
		width: auto;
		min-width: 0;
		height: auto;
		max-height: calc(100vh - 8rem);
		padding: 3rem max(3rem, calc((100% - 84rem) / 2)) 3.5rem;
		overflow: auto;
		border: 0;
		border-top: 1px solid
			color-mix(in srgb, var(--color-ink, #263229) 10.2%, transparent);

		/* The Navigation block's submenu colors (has-cream-background-color) are !important. */
		background-color: var(--ft-menu-sheet) !important;
		color: var(--color-ink, #263229);
		text-align: left;
		letter-spacing: normal;
		text-transform: none;
		box-shadow: 0 24px 40px #0b100c26;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0s linear 0.3s;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child.is-open
		> .wp-block-navigation__submenu-container,
	:root:not(.ft-menu-intent)
		.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child:is(:hover, :focus-within)
		> .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition:
			opacity 0.3s ease-out,
			transform 0.3s ease-out,
			visibility 0s;
	}

	/* A small menu (Site menu: "A small menu under the item"): the overlay's sheet, type and motion, sized to its
	   items and hanging from the header's lower edge under the item. site.js measures that drop (--ft-drop) and moves
	   the menu left when it would leave the screen (--ft-shift). Its items are one list; an item with items of its
	   own is a heading over them, as in the overlay's columns. The page behind does not dim. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child.ft-menu-small {
		position: relative;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .ft-menu-small
		> .wp-block-navigation__submenu-container {
		top: calc(100% + var(--ft-drop, 1.6rem));
		right: auto;
		left: calc(-1.75rem + var(--ft-shift, 0px));
		display: flex;
		flex-direction: column;
		gap: 0;
		width: max-content;
		min-width: 15rem;
		max-width: min(24rem, calc(100vw - 2rem));
		padding: 1.5rem 1.75rem 1.75rem;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .ft-menu-small
		> .wp-block-navigation__submenu-container
		> .has-child
		+ li,
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .ft-menu-small
		> .wp-block-navigation__submenu-container
		> li
		+ .has-child {
		margin-top: 1.25rem;
	}

	/* While its overlay is open, a line draws itself under the item, left to right, like a pen stroke. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation-item__content {
		position: relative;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -0.45em;
		left: 0;
		height: 1px;
		background: currentcolor;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 0.3s ease;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child.is-open
		> .wp-block-navigation-item__content::after,
	:root:not(.ft-menu-intent)
		.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child:is(:hover, :focus-within)
		> .wp-block-navigation-item__content::after {
		transform: scaleX(1);
		transform-origin: left center;
		transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	}

	/* As the overlay opens, its columns rise into place one after another; closing, they go with the panel. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li {
		opacity: 0;
		transform: translateY(1rem);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child.is-open
		> .wp-block-navigation__submenu-container
		> li,
	:root:not(.ft-menu-intent)
		.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child:is(:hover, :focus-within)
		> .wp-block-navigation__submenu-container
		> li {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.5s ease-out,
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(0.08s + var(--ft-column, 0) * 0.07s);
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(2) {
		--ft-column: 1;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(3) {
		--ft-column: 2;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(4) {
		--ft-column: 3;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(5) {
		--ft-column: 4;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(6) {
		--ft-column: 5;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(7) {
		--ft-column: 6;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li:nth-child(8) {
		--ft-column: 7;
	}

	/* Inside the overlay everything is shown at once: no arrows, and lists sit in place in their column. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item {
		display: block;
		position: static;
		width: auto;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-icon {
		display: none;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 0;
		overflow: visible;
		border: 0;
		background-color: transparent !important;
		box-shadow: none;
		visibility: inherit;
		opacity: 1;
		transform: none;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		display: block;
		padding: 0.3rem 0;
		color: var(--color-ink, #263229);
		font:
			400 1.4rem/1.25 "Cormorant Garamond",
			"Cormorant Garamond Fallback",
			serif;
		opacity: 1;
		transition: color 0.2s;
	}

	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		a.wp-block-navigation-item__content[href]:is(:hover, :focus-visible) {
		color: var(--color-wine, #713e3d);
	}

	/* A column's heading: the overlay item's own label. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> .has-child
		> .wp-block-navigation-item__content {
		margin-bottom: 0.75rem;
		padding: 0 0 0.85rem;
		border-bottom: 1px solid
			color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
		color: var(--color-wine, #713e3d);
		font:
			600 0.68rem/1.6 Manrope,
			"Manrope Fallback",
			sans-serif;
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}

	/* Links listed under a link in a column are indented beneath it. Every link in an overlay or small menu is the
	   same size; only the column headings differ. */
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container
		.wp-block-navigation__submenu-container {
		padding-left: 1rem;
	}
}

/* Reduced motion: no fades, slides or turning arrow (!important: the open state's transitions are more specific). */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> *,
	.ft-header::after,
	.ft-navigation.ft-navigation .wp-block-navigation__submenu-icon svg,
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation__submenu-container
		> li,
	.ft-navigation.ft-navigation.ft-navigation
		.wp-block-navigation__container
		> .has-child
		> .wp-block-navigation-item__content::after {
		transition: none !important;
	}
}

/* The phone menu: left-aligned (the header menu is right-aligned on desktop), with each submenu indented under its
   item beside a thin rule, a size smaller and closely spaced. */
.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	text-align: left;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	:is(
		.wp-block-navigation__responsive-container-content,
		.wp-block-navigation__container,
		.wp-block-navigation-item,
		.wp-block-navigation__submenu-container
	) {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding: 4.5rem 1.75rem 2.5rem;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 1.1rem;
}

/* The close button takes the menu button's place (the header's padding, less its own) and sticks there while the
   long menu scrolls, on a cream disc so the items pass under it; core puts a 24px button in the very corner. The
   negative margin keeps the items where they were. (Fixed would scroll away: the open menu frames fixed children.) */
.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: sticky;
	top: 0.75rem;
	right: auto;
	display: flex;
	margin: 0.75rem 1rem -3.25rem auto;
	padding: 0.5rem;
	border-radius: 50%;
	background: var(--color-cream, #f3efe5);
}

body.admin-bar
	.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	top: calc(0.75rem + 32px);
}

@media (max-width: 782px) {
	body.admin-bar
		.ft-navigation.ft-navigation
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		top: calc(0.75rem + 46px);
	}
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	gap: 0.7rem;
	margin: 0.9rem 0 0.4rem;
	padding: 0 0 0 1.1rem;
	border: 0;
	border-left: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 20%, transparent);
	background: none;
	box-shadow: none;
	font:
		1.35rem/1.25 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding: 0;
	opacity: 0.75;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	opacity: 1;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: none;
}

/* "Share this article" (Articles\ShareLinks): the header's social icon buttons in a row under a small-capitals
   label, in wine on the paper sheet. In a news article it is the first, full-width line of the article footer; in
   the Community Hub it sits over "Cite this article", as wide as the text. "Copy link" says so on the line below. */
.ft-share {
	color: var(--color-wine, #713e3d);
}

.ft-article-footer > .ft-share {
	flex-basis: 100%;
}

.ft-hub-article > .ft-share.ft-share {
	max-width: var(--ft-hub-end, var(--ft-hub-measure));
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ft-share-title.ft-share-title {
	margin: 0 0 0.6rem;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ft-share-list {
	flex-wrap: wrap;
	margin-left: -0.5rem;
}

.ft-share-list li[hidden] {
	display: none;
}

.ft-share-list button.ft-social-link {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ft-share-list .ft-social-link {
	width: 2.75rem;
	height: 2.75rem;
}

.ft-share-status.ft-share-status {
	min-height: 1.2em;
	margin: 0.25rem 0 0;
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
	font-size: 0.75rem;
	overflow-wrap: anywhere;
}

/* Social media icons (Clinic\SocialLinks, Global Settings → Social media) beside the header's booking button, faded
   like the menu's links until pointed at. Below 1024px the header keeps only the brand and the menu button, so the
   icons move to the end of the phone menu (the copy inside the navigation, hidden until the menu opens); between
   1024px and 1280px the menu leaves no room for them. */
.ft-social-list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: inherit;
	opacity: 0.65;
	transition:
		opacity 0.3s,
		background-color 0.3s;
}

.ft-social-link:hover,
.ft-social-link:focus-visible {
	background: color-mix(in srgb, currentcolor 10%, transparent);
	opacity: 1;
}

.ft-social-link svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* The icons and the booking button are one group at the right end: the menu takes the spare room on both sides of
   it (as space-between gave it before the icons), and the icons sit close to the button. Narrower, the menu is the
   menu button at the right end. */
@media (min-width: 1024px) {
	.ft-header-inner > .ft-navigation {
		margin-inline: auto;
	}
}

.ft-header-inner > :is(.ft-social, [data-type="fingertips/social-links"]) {
	margin-right: -1.25rem;
}

.ft-navigation .ft-social-menu {
	display: none;
}

.ft-navigation.ft-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.ft-social-menu {
	display: block;
	width: 100%;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 12.16%, transparent);
}

.ft-navigation .is-menu-open .ft-social-list {
	gap: 0.5rem;
	margin-left: -0.5rem;
}

.ft-navigation .is-menu-open .ft-social-link {
	width: 2.75rem;
	height: 2.75rem;
	opacity: 0.8;
}

.ft-navigation .is-menu-open .ft-social-link svg {
	width: 1.35rem;
	height: 1.35rem;
}

/* The menu fills the header up to about 1280px, where the icons would push it onto a second line; they are packed
   closer until 1440px, so all seven networks still fit at 1280px. */
@media (max-width: 1439px) {
	.ft-header-inner
		> :is(.ft-social, [data-type="fingertips/social-links"])
		.ft-social-list {
		gap: 0;
	}

	/* The smaller circles leave the icons' edge 2px nearer the button; the margin gives it back, so the gap to
	   Book Now looks the same at every width and however many icons there are. */
	.ft-header-inner > :is(.ft-social, [data-type="fingertips/social-links"]) {
		margin-right: -1.125rem;
	}

	.ft-header-inner
		> :is(.ft-social, [data-type="fingertips/social-links"])
		.ft-social-link {
		width: 2rem;
		height: 2rem;
	}
}

@media (max-width: 1279px) {
	.ft-header-inner > :is(.ft-social, [data-type="fingertips/social-links"]) {
		display: none;
	}
}

/* A service category's introduction (its Description) under the category name, in the muted tone the service
   pages use for their summary. It keeps the name's 72rem column (the constrained layout centres it) with the text
   held to a readable line length inside it. */
.wp-block-term-description.wp-block-term-description {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(100% - 46rem));
	opacity: 0.75;
}

/* Community Hub (templates hub and hub-article): a slim dark heading, then the search box and topic tree in a
   sticky column beside the reader, a paper panel with a thin ink border. On a wide screen an article's "On this
   page" list sits in a sticky column beside its text; narrower, it folds above the text, and on a phone the topic
   tree folds into "Browse topics".

   One set of tones and two kinds of small capitals keep its many small parts alike: labels (block titles, "All
   topics", folds) are the site's eyebrow, 0.64rem with 0.22em tracking; details (kind, dates, counts, buttons)
   are 0.62rem with 0.16em. Grey text is never fainter than --ft-hub-muted, which stays readable on paper. Boxes
   inside the paper reader are cream. */
:root {
	--ft-hub-top: 6.5rem;
	--ft-hub-rule: color-mix(
		in srgb,
		var(--color-ink, #263229) 12.16%,
		transparent
	);
	--ft-hub-muted: color-mix(
		in srgb,
		var(--color-ink, #263229) 74.12%,
		transparent
	);
	--ft-hub-soft: color-mix(
		in srgb,
		var(--color-ink, #263229) 74.9%,
		transparent
	);
	--ft-hub-tint: color-mix(
		in srgb,
		var(--color-ink, #263229) 5.1%,
		transparent
	);
	--ft-hub-measure: 44rem;
	--ft-hub-aside: 13rem;
	--ft-hub-aside-gap: clamp(2rem, 3vw, 3.5rem);
	--ft-hub-content: 64rem;

	/* Not the hub's: the reference styles' font stacks, with the metric-matched fallback faces (fonts.css) behind
	   the web fonts so text set before they load takes the same space. Other rules name the fallbacks directly. */
	--font-serif: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	--font-sans: "Manrope", "Manrope Fallback", sans-serif;
}

.ft-hub-home,
.ft-hub-back,
.ft-hub-block-title.ft-hub-block-title,
.ft-hub-tools-title.ft-hub-tools-title,
.ft-hub-text .ft-references .ft-references-heading,
.ft-hub-tags-label,
.ft-hub-questions-title,
.ft-hub-tree .ft-hub-browse > summary,
.ft-hub-contents summary {
	font:
		600 0.64rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ft-hub-result-meta,
.ft-hub-best,
.ft-hub-place-kind,
.ft-hub-badges,
.ft-hub-meta.ft-hub-meta,
.ft-hub-topic-card-count,
.ft-hub-tag,
.ft-cite-style,
.ft-cite-button,
.ft-hub-print,
.ft-hub-highlight-note button {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Pills: the article's kind, the tags, the citing buttons. */
.ft-hub-kind,
.ft-hub-tag,
.ft-cite-button,
.ft-hub-print {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0 0.9rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	border-radius: 999px;
	color: var(--color-ink, #263229);
	text-decoration: none;
	transition:
		background-color 0.3s,
		border-color 0.3s,
		color 0.3s;
}

.ft-hub-tag:hover,
.ft-hub-tag:focus-visible,
.ft-hub-tag[aria-current],
.ft-cite-button:hover,
.ft-cite-button:focus-visible,
.ft-hub-print:hover,
.ft-hub-print:focus-visible {
	border-color: var(--color-ink, #263229);
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-cite-button,
.ft-hub-print {
	cursor: pointer;
}

.ft-hub-band {
	padding: clamp(8.5rem, 12vw, 10.5rem) clamp(1.25rem, 4vw, 3rem)
		clamp(2.5rem, 4vw, 3.5rem);
}

.ft-hub-band-label {
	margin: 0;
}

.ft-hub-band-title {
	margin: 0.75rem 0 0 !important;
	font:
		400 clamp(2.75rem, 5.5vw, 4.75rem)/0.95 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: -0.01em;
}

.ft-hub-band-title a {
	color: inherit;
	text-decoration: none;
}

.ft-hub-band-text {
	max-width: 38rem;
	margin: 1.1rem 0 0 !important;
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 67.06%, transparent);
	font-size: 0.95rem;
	line-height: 1.8;
}

/* Over an article the heading is a slim strip, so the article's own title and first lines are on the first screen.
   Asked of the page rather than the template, because moving between hub pages swaps only the reader. */
.ft-main:has(.ft-hub-article) .ft-hub-band {
	padding-top: clamp(6.25rem, 8vw, 7rem);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.ft-main:has(.ft-hub-article) .ft-hub-band-title {
	margin-top: 0.35rem !important;
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

.ft-main:has(.ft-hub-article) :is(.ft-hub-band-text, .ft-hub-feed-link) {
	display: none;
}

/* "Follow by RSS" under the hub's introduction, at its left edge (the News heading's link sits indented). */
.ft-hub-band .ft-hub-feed-link {
	margin: 1.25rem 0 0 !important;
}

.ft-hub {
	display: grid;
	grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem)
		clamp(4rem, 7vw, 6rem);
}

.ft-hub > .wp-block-template-part {
	position: sticky;
	top: var(--ft-hub-top);
	max-height: calc(100vh - var(--ft-hub-top) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The hub's scrolling lists (the sidebar, the topics and questions while searching, "On this page") share a thin
   scrollbar in the ink of the text, turning wine while pointed at. Safari ignores scrollbar-color and is given
   the same with its own scrollbar styles. */
.ft-hub > .wp-block-template-part,
.ft-hub-tree.is-narrowed .ft-hub-tree-list,
.ft-hub-question-list.ft-hub-question-list,
.ft-hub-question-found,
.ft-editorial-body > .ft-hub-contents {
	scrollbar-color: color-mix(
			in srgb,
			var(--color-ink, #263229) 30.2%,
			transparent
		)
		transparent;
	scrollbar-width: thin;
}

:is(
	.ft-hub > .wp-block-template-part,
	.ft-hub-tree.is-narrowed .ft-hub-tree-list,
	.ft-hub-question-list.ft-hub-question-list,
	.ft-hub-question-found,
	.ft-editorial-body > .ft-hub-contents
):hover {
	scrollbar-color: color-mix(
			in srgb,
			var(--color-wine, #713e3d) 60%,
			transparent
		)
		transparent;
}

@supports not (scrollbar-color: auto) {
	:is(
		.ft-hub > .wp-block-template-part,
		.ft-hub-tree.is-narrowed .ft-hub-tree-list,
		.ft-hub-question-list.ft-hub-question-list,
		.ft-hub-question-found,
		.ft-hub-question-found,
		.ft-editorial-body > .ft-hub-contents
	)::-webkit-scrollbar {
		width: 6px;
	}

	:is(
		.ft-hub > .wp-block-template-part,
		.ft-hub-tree.is-narrowed .ft-hub-tree-list,
		.ft-hub-question-list.ft-hub-question-list,
		.ft-hub-question-found,
		.ft-hub-question-found,
		.ft-editorial-body > .ft-hub-contents
	)::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: color-mix(
			in srgb,
			var(--color-ink, #263229) 30.2%,
			transparent
		);
	}

	:is(
			.ft-hub > .wp-block-template-part,
			.ft-hub-tree.is-narrowed .ft-hub-tree-list,
			.ft-hub-question-list.ft-hub-question-list,
			.ft-hub-question-found,
			.ft-hub-question-found,
			.ft-editorial-body > .ft-hub-contents
		):hover::-webkit-scrollbar-thumb {
		background: color-mix(
			in srgb,
			var(--color-wine, #713e3d) 60%,
			transparent
		);
	}
}

/* While searching, the topics scroll on their own, so "Questions" stays right under them however many articles
   match; the questions list takes most of what is left of the screen. The lists' lower edge fades while there is
   more below (where the browser can tell, from the list's own scroll position), and their text and counts keep clear
   of the scrollbar, which phones and Macs draw over the content rather than beside it. */
@property --ft-hub-fade {
	syntax: "<length>";
	inherits: false;
	initial-value: 0;
}

.ft-hub-tree.is-narrowed .ft-hub-tree-list {
	max-height: calc((100vh - var(--ft-hub-top)) * 0.42);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ft-hub-tree.is-narrowed .ft-hub-tree-list,
.ft-hub-question-list.ft-hub-question-list,
.ft-hub-question-found {
	padding-right: 0.75rem;
	scrollbar-gutter: stable;
	mask-image: linear-gradient(
		to bottom,
		#000 calc(100% - var(--ft-hub-fade)),
		transparent
	);
}

@supports (animation-timeline: scroll()) {
	.ft-hub-tree.is-narrowed .ft-hub-tree-list,
	.ft-hub-question-list.ft-hub-question-list,
	.ft-hub-question-found {
		animation: ft-hub-fade linear both;
		animation-timeline: scroll(self);
	}
}

@keyframes ft-hub-fade {
	0%,
	85% {
		--ft-hub-fade: 2.5rem;
	}

	100% {
		--ft-hub-fade: 0;
	}
}

.ft-hub-sidebar {
	display: grid;
	gap: 1.5rem;
	padding-bottom: 1rem;
}

/* The search box: a pill with a magnifier button, and the live results under it. Beside the text it stays at the
   top of the sidebar as the topics scroll under it. */
.ft-hub-search {
	position: sticky;
	z-index: 2;
	top: 0;
	background: var(--color-cream, #f3efe5);
}

.ft-hub-search::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 1rem;
	background: linear-gradient(
		var(--color-cream, #f3efe5),
		color-mix(in srgb, var(--color-cream, #f3efe5) 0%, transparent)
	);
	pointer-events: none;
}

.ft-hub-search-form {
	position: relative;
	display: flex;
}

.ft-hub-search-input.ft-hub-search-input {
	width: 100%;
	min-height: 3rem;
	padding: 0 3.25rem 0 1.25rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 20%, transparent);
	border-radius: 999px;
	background: var(--color-paper, #e9e2d4);
	color: var(--color-ink, #263229);
	font:
		500 0.92rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	transition:
		border-color 0.3s,
		box-shadow 0.3s;
}

.ft-hub-search-input::placeholder {
	color: color-mix(in srgb, var(--color-ink, #263229) 74.12%, transparent);
}

.ft-hub-search-input:focus {
	border-color: var(--color-wine, #713e3d);
	outline: none;
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--color-wine, #713e3d) 14.9%, transparent);
}

.ft-hub-search-input::-webkit-search-cancel-button {
	cursor: pointer;
}

.ft-hub-search-button {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color 0.3s;
}

.ft-hub-search-button:hover,
.ft-hub-search-button:focus-visible {
	background: var(--color-wine, #713e3d);
}

.ft-hub-search-hint {
	margin: 0.55rem 0 0 1.25rem;
	color: var(--ft-hub-muted);
	font-size: 0.7rem;
}

.ft-hub-search-hint kbd {
	padding: 0 0.35em;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	border-radius: 3px;
	font: inherit;
}

/* The question or section of the article a result was found in: the kind in small capitals, the words in serif. */
.ft-hub-result-place {
	display: block;
	margin: 0.4rem 0 0;
	color: var(--color-ink, #263229);
	font:
		italic 500 1.1rem/1.35 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-place-kind {
	margin-right: 0.45em;
	color: var(--color-wine, #713e3d);
	font-family: Manrope, "Manrope Fallback", sans-serif;
	font-style: normal;
}

/* The words searched for, in results and (with the CSS highlight, or <mark> where it is missing) in the article.
   No padding: a match inside a word ("asleep") must not split it. */
.ft-hub mark,
.ft-hub-mark {
	border-radius: 2px;
	background: #c9a96e66;
	box-shadow: inset 0 -1px 0
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	color: inherit;
}

::highlight(ft-search) {
	background-color: #c9a96e66;
	color: inherit;
}

.ft-hub-highlight-note,
.ft-hub-toast {
	position: fixed;
	z-index: 40;
	bottom: 1.25rem;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.5rem 0.5rem 0.5rem 1.1rem;
	border-radius: 999px;
	background: var(--color-ink, #263229);
	box-shadow: 0 0.75rem 2rem
		color-mix(in srgb, var(--color-ink, #263229) 23.92%, transparent);
	color: var(--color-cream, #f3efe5);
	font-size: 0.8rem;
	translate: -50% 0;
}

.ft-hub-highlight-note button {
	min-height: 2rem;
	padding: 0 0.9rem;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 34.9%, transparent);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
}

.ft-hub-highlight-note button:hover,
.ft-hub-highlight-note button:focus-visible {
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
}

/* The folds (topic folders, "Browse topics" and "On this page" on narrow screens) share one turning arrow. */
.ft-hub-tree summary::before,
.ft-hub-contents summary::before {
	content: "";
	flex: none;
	width: 0.42rem;
	height: 0.42rem;
	border-right: 1px solid currentcolor;
	border-bottom: 1px solid currentcolor;
	background: none;
	opacity: 0.6;
	rotate: -45deg;
	translate: 0 -0.08rem;
	transition: rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-hub-tree details[open] > summary::before,
.ft-hub-contents details[open] > summary::before {
	rotate: 45deg;
}

.ft-hub-tree summary::-webkit-details-marker,
.ft-hub-contents summary::-webkit-details-marker {
	display: none;
}

/* The topic tree: folders with a turning arrow, the article shown marked in wine. */
.ft-hub-tree {
	font-size: 0.88rem;
	line-height: 1.45;
}

.ft-hub-tree .ft-hub-browse > summary {
	display: none;
}

.ft-hub-home {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--ft-hub-muted);
	text-decoration: none;
}

.ft-hub-home:hover,
.ft-hub-home[aria-current] {
	color: var(--color-wine, #713e3d);
}

.ft-hub-tree ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-hub-tree-list {
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-tree-list > li {
	border-bottom: 1px solid var(--ft-hub-rule);
}

/* A topic's own list hangs from a thin line under its arrow (not the whole tree, which is in a fold too). */
.ft-hub-topic > details > ul {
	margin: 0 0 0.6rem 0.2rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--ft-hub-rule);
}

.ft-hub-tree summary {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.55rem 0;
	cursor: pointer;
	list-style: none;
}

/* A topic's link is laid over its fold's button (HubTreeRenderer::topics), between the arrow and the count, on
   the unseen copy of its name that gives the button its height. Both must be exactly as wide, or a long name
   wraps onto two lines in the link but one in the copy and runs into the next topic: the count has a fixed width,
   and the link stops that width and the button's gap short of the edge. */
.ft-hub-topic {
	--ft-hub-count-width: 2rem;
	position: relative;
}

.ft-hub-topic-name {
	flex: 1;
	font-weight: 600;
	overflow-wrap: anywhere;
	visibility: hidden;
}

.ft-hub-topic > .ft-hub-topic-link {
	position: absolute;
	z-index: 1;
	top: 0;
	right: calc(var(--ft-hub-count-width) + 0.5rem);
	left: 0.92rem;
	min-height: 1.5rem;
	padding: 0.55rem 0;
	overflow-wrap: anywhere;
}

.ft-hub-topic-link {
	flex: 1;
	color: var(--color-ink, #263229);
	font-weight: 600;
	text-decoration: none;
}

.ft-hub-count {
	flex: none;
	width: var(--ft-hub-count-width, auto);
	min-width: 1.5rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--ft-hub-tint);
	color: var(--ft-hub-muted);
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.ft-hub-entry a {
	display: block;
	margin-left: -0.75rem;
	padding: 0.35rem 0 0.35rem 0.75rem;
	border-left: 2px solid transparent;
	color: var(--ft-hub-soft);
	text-decoration: none;
	transition:
		color 0.2s,
		border-color 0.2s;
}

/* Articles filed in the hub itself line up with the topics' names. */
.ft-hub-tree-list > .ft-hub-entry a {
	margin-left: 0;
	padding: 0.55rem 0 0.55rem 0.92rem;
	border-left: 0;
}

.ft-hub-tree a:hover,
.ft-hub-tree a:focus-visible {
	color: var(--color-wine, #713e3d);
}

.ft-hub-tree a[aria-current] {
	border-left-color: var(--color-wine, #713e3d);
	color: var(--color-wine, #713e3d);
	font-weight: 600;
}

.ft-hub-tree-empty {
	color: var(--ft-hub-muted);
	font-size: 0.82rem;
}

.ft-hub-tree-none {
	margin: 0.75rem 0 0;
	line-height: 1.5;
}

/* The hub's page before any article is published: three promises and where to go meanwhile. Its sidebar would be
   empty, so the reader takes the whole width. */
.ft-hub:has(.ft-hub-results.is-welcome) {
	grid-template-columns: minmax(0, 1fr);
}

.ft-hub:has(.ft-hub-results.is-welcome) > .wp-block-template-part {
	display: none;
}

.ft-hub-welcome {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.ft-hub-welcome-item {
	padding: 1.5rem 1.4rem 1.6rem;
	border: 1px solid var(--ft-hub-rule);
	border-top: 2px solid var(--color-wine, #713e3d);
	background: var(--color-cream, #f3efe5);
}

.ft-hub-welcome-number {
	color: var(--color-wine, #713e3d);
	font:
		italic 400 1.6rem/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-welcome-title.ft-hub-welcome-title {
	margin: 0.9rem 0 0;
	color: var(--color-ink, #263229);
	font:
		400 1.5rem/1.15 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-welcome-text {
	margin: 0.6rem 0 0;
	color: var(--ft-hub-soft);
	font-size: 0.88rem;
	line-height: 1.65;
}

.ft-hub-welcome-next {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-welcome-ask {
	max-width: var(--ft-hub-measure);
	margin: 0;
	color: var(--color-ink, #263229);
	font:
		400 clamp(1.35rem, 2.2vw, 1.65rem)/1.3 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-welcome-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 1.25rem 0 0;
}

.ft-hub-welcome-links .ft-hub-topic-all {
	min-height: 2.5rem;
}

/* A listing with nothing in it (a topic, a tag, a search): what happened and where to go instead. */
.ft-hub-empty-state {
	max-width: var(--ft-hub-measure);
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px dashed
		color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 40%,
		transparent
	);
}

.ft-hub-empty-title {
	margin: 0;
	color: var(--color-ink, #263229);
	font:
		400 clamp(1.4rem, 2.4vw, 1.75rem)/1.2 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-empty-text {
	margin: 0.6rem 0 0;
	color: var(--ft-hub-soft);
	font-size: 0.9rem;
	line-height: 1.65;
}

.ft-hub-empty-state .ft-hub-welcome-links {
	margin-top: 1.25rem;
}

/* Under an article: one line about checking with a provider, and the booking button. The class is doubled to beat
   the flow layout's zero margin; it is as wide as the text, like "Cite this article". */
.ft-hub-talk.ft-hub-talk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	box-sizing: border-box;
	max-width: var(--ft-hub-end, var(--ft-hub-measure));
	margin-top: 2rem;
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--color-wine, #713e3d);
	background: var(--color-cream, #f3efe5);
}

.ft-hub-talk-text {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--ft-hub-soft);
	font-size: 0.88rem;
	line-height: 1.6;
}

.ft-hub-talk-button {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0 1.25rem;
	border-radius: 999px;
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s;
}

.ft-hub-talk-button:hover,
.ft-hub-talk-button:focus-visible {
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
}

/* How many articles the words found (hub.js), under the search box. */
.ft-hub-filter-status {
	margin: 0.55rem 0 0 1.25rem;
	color: var(--ft-hub-soft);
	font-size: 0.75rem;
	line-height: 1.5;
}

.ft-hub-filter-status:empty {
	display: none;
}

.ft-hub-search:has(.ft-hub-filter-status:not(:empty)) .ft-hub-search-hint {
	display: none;
}

/* While narrowed, the best match is a paper panel in the tree with the part of it that answers. */
.ft-hub-tree .ft-hub-entry.is-best a {
	padding: 0.6rem 0.75rem 0.65rem;
	border-left-color: var(--color-wine, #713e3d);
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
}

.ft-hub-best {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--color-wine, #713e3d);
	font-weight: 600;
}

.ft-hub-best.ft-hub-best-place {
	margin: 0.35rem 0 0;
	color: var(--ft-hub-soft);
	font:
		italic 500 0.95rem/1.35 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: 0;
	text-transform: none;
}

/* "Questions": every question the articles answer, a folder under the topics. */
.ft-hub-questions {
	margin-top: 1.25rem;
}

.ft-hub-questions > summary {
	color: var(--ft-hub-muted);
}

.ft-hub-questions-title {
	flex: 1;
}

.ft-hub-question-list.ft-hub-question-list,
.ft-hub-question-found {
	max-height: max(16rem, calc((100vh - var(--ft-hub-top)) * 0.3));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-question-group {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ft-hub-rule);
}

.ft-hub-question-group a {
	display: block;
	color: var(--ft-hub-soft);
	text-decoration: none;
}

.ft-hub-question-main {
	padding-left: 0.92rem;
	font-weight: 600;
}

.ft-hub-question-group ul {
	margin: 0.25rem 0 0 1.12rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--ft-hub-rule);
}

.ft-hub-question-group li a {
	padding: 0.2rem 0;
	font-size: 0.82rem;
}

.ft-hub-questions-hint {
	margin: 0 0 0 0.92rem;
	color: var(--ft-hub-muted);
	font-size: 0.8rem;
	line-height: 1.5;
}

/* The questions closest to the words being typed, closest first, each with the article it is in. */
.ft-hub-question-found {
	margin: 0;
	padding-block: 0;
	padding-left: 0;
	border-top: 1px solid var(--ft-hub-rule);
	list-style: none;
}

.ft-hub-question-hit {
	display: block;
	padding: 0.5rem 0 0.5rem 0.92rem;
	border-bottom: 1px solid var(--ft-hub-rule);
	color: var(--color-ink, #263229);
	font-size: 0.85rem;
	text-decoration: none;
}

.ft-hub-question-from {
	display: block;
	margin-top: 0.15rem;
	color: var(--ft-hub-muted);
	font:
		italic 500 0.9rem/1.3 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

/* A question found under another (hub.js): the one it belongs to, before it. */
.ft-hub-question-context {
	color: var(--ft-hub-muted);
}

/* A folder's link to all of its articles, when it lists only some. */
.ft-hub-more a {
	display: block;
	padding: 0.35rem 0;
	color: var(--color-wine, #713e3d);
	font-size: 0.8rem;
	text-decoration: none;
}

.ft-hub-questions-empty {
	margin: 0.5rem 0 0 0.92rem;
	color: var(--ft-hub-muted);
	font-size: 0.8rem;
}

/* "Back to …" above an article opened from a filtered list or a search (added by hub.js). */
.ft-hub-back {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	color: var(--color-wine, #713e3d);
	text-decoration: none;
}

.ft-hub-back::before {
	content: "←" / "";
	font-size: 0.9rem;
	letter-spacing: 0;
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-hub-back:hover::before,
.ft-hub-back:focus-visible::before {
	translate: -0.25rem 0;
}

/* The reader spans the screen; on wide screens its padding grows so what it holds stays a centred column. */
.ft-hub-reader {
	min-width: 0;
	padding: clamp(1.75rem, 4vw, 4rem)
		max(clamp(1.25rem, 5vw, 4.5rem), (100% - var(--ft-hub-content)) / 2);
	border: 1px solid var(--ft-hub-rule);
	background: var(--color-paper, #e9e2d4);
	color: var(--color-ink, #263229);
}

.ft-hub-trail {
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	color: var(--ft-hub-muted);
}

.ft-hub-trail a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.ft-hub-trail a:hover {
	color: var(--color-wine, #713e3d);
}

.ft-hub-trail-step {
	opacity: 0.45;
}

.ft-hub-page-title,
.ft-hub-article-title.ft-hub-article-title {
	margin: 1.1rem 0 0 !important;
	font:
		400 clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem)/1.05 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* The lead under a title: a topic's introduction or an article's summary, in the article's serif. */
.ft-hub-intro,
.ft-hub-standfirst.ft-hub-standfirst {
	max-width: var(--ft-hub-measure);
	margin-top: 1rem !important;
	color: var(--ft-hub-soft);
	font:
		400 clamp(1.0625rem, 1rem + 0.25vw, 1.2rem) / 1.55 "Source Serif 4",
		"Source Serif 4 Fallback",
		Georgia,
		serif;
}

.ft-hub-intro > * + * {
	margin-top: 1rem;
}

.ft-hub-result-count {
	margin: 1rem 0 0;
	color: var(--ft-hub-muted);
	font-size: 0.9rem;
}

/* Tags: a row of pills under the title that narrows the lists to one tag. */
.ft-hub-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-tags-label {
	margin-right: 0.5rem;
	color: var(--ft-hub-muted);
}

.ft-hub-tag-count {
	margin-left: 0.45rem;
	opacity: 0.6;
}

/* The results page's rows that narrow and order the results, in the tag row's pills. */
.ft-hub-refine {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-refine-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ft-hub-refine-row > .ft-hub-tags-label {
	min-width: 4.5rem;
}

.ft-hub-empty .ft-hub-refine-row {
	margin-top: 1.25rem;
}

.ft-hub-clear {
	margin-left: 0.5rem;
	color: var(--color-wine, #713e3d);
}

.ft-hub-tip {
	max-width: var(--ft-hub-measure);
	margin: 1.5rem 0 0;
	color: var(--ft-hub-muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.ft-hub-tip code {
	color: var(--color-ink, #263229);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
}

.ft-hub-block,
.ft-hub-result-list {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.ft-hub-block-title.ft-hub-block-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	color: var(--ft-hub-muted);
}

.ft-hub-block-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ft-hub-rule);
}

.ft-hub-topic-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-hub-topic-card a {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: 1.4rem 1.4rem 1.25rem;
	border: 1px solid var(--ft-hub-rule);
	background-color: var(--color-cream, #f3efe5);
	background-image: linear-gradient(
		var(--color-wine, #713e3d),
		var(--color-wine, #713e3d)
	);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 0 2px;
	color: var(--color-ink, #263229);
	text-decoration: none;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ft-hub-topic-card a:hover,
.ft-hub-topic-card a:focus-visible {
	background-size: 100% 2px;
	box-shadow: 0 0.9rem 2rem -1.25rem
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	transform: translateY(-3px);
}

.ft-hub-topic-card-name {
	font:
		400 1.6rem/1.1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-topic-card-text {
	color: var(--ft-hub-soft);
	font-size: 0.85rem;
	line-height: 1.6;
}

.ft-hub-topic-card-count {
	margin-top: auto;
	padding-top: 0.4rem;
	color: var(--color-wine, #713e3d);
}

/* The hub's page: each topic's name over cards of its latest articles. */
.ft-hub-topic-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	margin-bottom: 1.1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--ft-hub-rule);
}

.ft-hub-topic-heading.ft-hub-topic-heading {
	margin: 0;
	font:
		400 clamp(1.7rem, 2.6vw, 2.15rem)/1.1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-topic-heading a {
	color: var(--color-ink, #263229);
	text-decoration: none;
	transition: color 0.3s;
}

.ft-hub-topic-heading a:hover {
	color: var(--color-wine, #713e3d);
}

.ft-hub-topic-all {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 1.1rem;
	border: 1px solid
		color-mix(in srgb, var(--color-wine, #713e3d) 45.1%, transparent);
	border-radius: 999px;
	color: var(--color-wine, #713e3d);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color 0.3s,
		color 0.3s;
}

.ft-hub-topic-all-arrow {
	margin-left: 0.5em;
}

.ft-hub-topic-all:hover,
.ft-hub-topic-all:focus-visible {
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
}

.ft-hub-stories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-hub-story a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ft-hub-rule);
	background-color: var(--color-cream, #f3efe5);
	background-image: linear-gradient(
		var(--color-wine, #713e3d),
		var(--color-wine, #713e3d)
	);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 0 2px;
	color: var(--color-ink, #263229);
	text-decoration: none;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ft-hub-story a:hover,
.ft-hub-story a:focus-visible {
	background-size: 100% 2px;
	box-shadow: 0 0.9rem 2rem -1.25rem
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	transform: translateY(-3px);
}

.ft-hub-story .ft-hub-story-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ft-hub-story-question.ft-hub-story-question {
	margin: 0;
	padding: 1.3rem 1.3rem 0;
	font:
		400 1.45rem/1.15 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	transition: color 0.3s;
}

.ft-hub-story a:hover .ft-hub-story-question {
	color: var(--color-wine, #713e3d);
}

.ft-hub-story-preview {
	margin: 0.6rem 0 0;
	padding: 0 1.3rem 1.3rem;
	color: var(--ft-hub-soft);
	font-size: 0.85rem;
	line-height: 1.65;
}

/* A card's or result's short answer (Articles\ShortAnswer), labelled in the eyebrow's small capitals. */
.is-answer {
	color: color-mix(in srgb, var(--color-ink, #263229) 85.1%, transparent);
}

.ft-hub-answer-label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--color-wine, #713e3d);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Lists of articles: on the hub's and topics' pages, under an article and in search results. */
.ft-hub-article-list,
.ft-hub-result-list {
	padding: 0;
	border-top: 1px solid var(--ft-hub-rule);
	list-style: none;
}

.ft-hub-article-list {
	margin: 0;
}

/* Under a block title its line is the list's top rule; a second one would double it. */
.ft-hub-block-title + :is(.ft-hub-article-list, .ft-hub-result-list) {
	border-top: 0;
}

.ft-hub-article-item,
.ft-hub-result {
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--ft-hub-rule);
}

.ft-hub-list-title,
.ft-hub-result-title {
	color: var(--color-ink, #263229);
	font:
		400 clamp(1.45rem, 2.2vw, 1.75rem)/1.15 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
	text-decoration: none;
	transition: color 0.3s;
}

.ft-hub-list-title:hover,
.ft-hub-result-title:hover {
	color: var(--color-wine, #713e3d);
}

.ft-hub-result-meta {
	margin: 0.45rem 0 0;
	color: var(--ft-hub-muted);
}

.ft-hub-article-summary,
.ft-hub-result-snippet {
	max-width: var(--ft-hub-measure);
	margin: 0.55rem 0 0;
	color: var(--ft-hub-soft);
	font-size: 0.92rem;
	line-height: 1.7;
}

/* An article in the reader. */
.ft-hub-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin: 1rem 0 0;
}

.ft-hub-kind {
	min-height: 1.75rem;
	border-color: color-mix(
		in srgb,
		var(--color-wine, #713e3d) 45.1%,
		transparent
	);
	color: var(--color-wine, #713e3d);
}

.ft-hub-reviewed {
	color: var(--ft-hub-muted);
}

.ft-hub-reviewed::before {
	content: "✓ " / "";
	color: #526151;
}

.ft-hub-meta.ft-hub-meta {
	gap: 0.4rem 1.5rem;
	margin-top: 1.75rem !important;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ft-hub-rule);
	color: var(--ft-hub-muted);
}

.ft-hub-featured {
	margin-top: 2rem !important;
}

.ft-hub-featured img {
	width: 100%;
	object-fit: cover;
}

/* A wide band rather than 16:9, so the photo sets the mood without pushing the text off the first screen. The block
   writes its ratio inline, hence !important; editor and site alike. */
.ft-hub-article .ft-hub-featured img {
	aspect-ratio: 21 / 9 !important;
}

.ft-hub-body {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

/* The article's text is set like a newspaper's: Source Serif 4, a serif drawn for reading on screens, at 17–18px
   in full ink, its headings a step down from the pages' so they lead rather than shout. --ft-hub-text-scale is the
   reader's own text size (hub-reader.js: Small, Medium or Large), 1 unless they choose otherwise; the headings and
   questions follow it, so the text keeps its proportions. */
.ft-hub-text.ft-hub-text {
	--ft-hub-body: calc(
		clamp(1.0625rem, 1rem + 0.15vw, 1.125rem) * var(--ft-hub-text-scale, 1)
	);
	max-width: var(--ft-hub-measure);
	color: var(--color-ink, #263229);
	font:
		400 var(--ft-hub-body) / 1.65 "Source Serif 4",
		"Source Serif 4 Fallback",
		Georgia,
		serif;
}

.ft-hub-text > * + * {
	margin-block-start: 1.15em !important;
}

.ft-hub-text.ft-hub-text h2 {
	margin-block-start: 2.6rem !important;
	font-size: calc(
		clamp(1.65rem, 1.4rem + 0.8vw, 2rem) * var(--ft-hub-text-scale, 1)
	);
	line-height: 1.15;
}

.ft-hub-text.ft-hub-text h3 {
	margin-block-start: 2rem !important;
	font-size: calc(
		clamp(1.35rem, 1.2rem + 0.5vw, 1.55rem) * var(--ft-hub-text-scale, 1)
	);
	line-height: 1.2;
}

.ft-hub-text.ft-hub-text .wp-block-list li + li {
	margin-top: 0.45em;
}

.ft-hub-text.ft-hub-text .wp-block-details summary {
	font-size: calc(
		clamp(1.2rem, 1.1rem + 0.3vw, 1.35rem) * var(--ft-hub-text-scale, 1)
	);
}

/* The short answer: the opening paragraph, also when "The short answer" heading names it, a little larger. */
.ft-hub-text > p:first-child,
.ft-hub-text > h2:first-child + p {
	font-size: calc(var(--ft-hub-body) * 1.17);
	line-height: 1.55;
}

.ft-hub-text :is(h2, h3, details) {
	scroll-margin-top: calc(var(--ft-hub-top) + 1rem);
}

/* "On this page": folded above the text like "Browse topics" until there is room for a column of its own. */
.ft-hub-contents {
	margin-bottom: 2rem;
	border: 1px solid var(--ft-hub-rule);
	background: var(--color-cream, #f3efe5);
}

.ft-hub-contents summary {
	gap: 0.6rem;
	padding: 0.9rem 1.1rem;
	color: var(--color-ink, #263229);
	cursor: pointer;
	list-style: none;
}

.ft-hub-contents ol {
	margin: 0;
	padding: 0 1.1rem 1rem;
	list-style: none;
}

.ft-hub-contents li {
	margin: 0;
}

.ft-hub-contents li.is-level-3 {
	padding-left: 0.9rem;
}

.ft-hub-contents a {
	display: block;
	padding: 0.3rem 0 0.3rem 0.8rem;
	border-left: 2px solid var(--ft-hub-rule);
	color: var(--ft-hub-soft);
	font-size: 0.84rem;
	line-height: 1.45;
	text-decoration: none;
	transition:
		color 0.2s,
		border-color 0.2s;
}

.ft-hub-contents a:hover,
.ft-hub-contents a:focus-visible {
	color: var(--color-wine, #713e3d);
}

/* A long list in parts (ArticleContentsRenderer): every part but the one being read folds to its heading and a
   count (hub.js); without the script all stay open. */
.ft-hub-contents ol ol {
	padding: 0;
}

.ft-hub-contents-count {
	display: none;
}

.ft-hub-contents .is-part.is-folded > ol {
	display: none;
}

.ft-hub-contents .is-part.is-folded > .ft-hub-contents-count {
	display: block;
	padding: 0 0 0.35rem 0.8rem;
	border-left: 2px solid var(--ft-hub-rule);
	color: var(--ft-hub-muted);
	font-size: 0.72rem;
	line-height: 1.3;
}

.ft-hub-contents a[aria-current] {
	border-left-color: var(--color-wine, #713e3d);
	color: var(--color-ink, #263229);
	font-weight: 600;
}

@media (min-width: 80rem) {
	.ft-hub-body {
		display: grid;
		grid-template-columns: minmax(0, var(--ft-hub-measure)) var(
				--ft-hub-aside
			);
		gap: var(--ft-hub-aside-gap);
		align-items: start;
	}

	.ft-hub-body > .ft-hub-text {
		grid-row: 1;
		grid-column: 1;
	}

	/* What follows the text keeps its right edge, though "On this page" no longer stands beside it. */
	.ft-hub-reader {
		--ft-hub-end: min(
			var(--ft-hub-measure),
			100% - var(--ft-hub-aside) - var(--ft-hub-aside-gap)
		);
	}

	.ft-hub-contents {
		position: sticky;
		top: var(--ft-hub-top);
		grid-row: 1;
		grid-column: 2;
		margin: 0;
		border: 0;
		background: none;
	}

	.ft-hub-contents summary {
		padding: 0 0 0.75rem;
		color: var(--ft-hub-muted);
		cursor: default;
		pointer-events: none;
	}

	/* Open for good, so the eyebrow's line instead of an arrow. */
	.ft-hub-contents details[open] > summary::before {
		width: 2rem;
		height: 1px;
		border: 0;
		background: currentcolor;
		opacity: 0.5;
		rotate: none;
		translate: none;
	}

	.ft-hub-contents ol {
		padding: 0;
	}
}

/* Citing and printing, and the note under every article; its title is the References heading's twin. The class
   is doubled to beat the flow layout's zero margin, which otherwise put its rule right under the References. */
.ft-hub-tools.ft-hub-tools {
	max-width: var(--ft-hub-end, var(--ft-hub-measure));
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--ft-hub-rule);
}

.ft-hub-tools-title.ft-hub-tools-title,
.ft-hub-text .ft-references .ft-references-heading {
	margin: 0 !important;
	color: var(--color-wine, #713e3d);
}

.ft-cite-line {
	margin: 0.9rem 0 0;
	padding: 1rem 1.15rem;
	border-left: 2px solid #c9a96e;
	background: var(--color-cream, #f3efe5);
	font-size: 0.92rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.ft-cite-line a,
.ft-cite-source-list a {
	color: var(--color-wine, #713e3d);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ft-cite-controls,
.ft-cite-files {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	color: var(--ft-hub-muted);
	font-size: 0.8rem;
}

.ft-cite-style {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ft-cite-style select {
	min-height: 2rem;
	padding: 0 2rem 0 0.9rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	border-radius: 999px;
	background-color: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
	font:
		500 0.82rem Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

.ft-cite-sources {
	margin-top: 1rem;
}

.ft-cite-sources summary {
	color: var(--color-wine, #713e3d);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 600;
}

.ft-cite-source-list {
	margin: 0.75rem 0;
	padding-left: 1.4rem;
	font-size: 0.85rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.ft-cite-source-list li + li {
	margin-top: 0.5rem;
}

.ft-hub-print-row {
	margin: 1.5rem 0 0;
}

.ft-hub-disclaimer {
	margin: 1.75rem 0 0;
	color: var(--ft-hub-muted);
	font-size: 0.8rem;
	font-style: italic;
	line-height: 1.7;
}

.ft-hub-results.is-related {
	max-width: var(--ft-hub-end, var(--ft-hub-measure));
}

/* Comments in the reader line up with the text and keep the same distance from the list above as a block; without
   it their box's top edge fell on the last article's rule. Doubled to beat the flow layout's zero margin. */
.ft-hub-reader > .ft-article-comments.ft-article-comments {
	max-width: var(--ft-hub-end, var(--ft-hub-measure));
	margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
	padding: 0;
}

/* The card that shows a citation's source. */
.ft-cite-card {
	position: fixed;
	z-index: 60;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.8rem;
	padding: 1rem 1.15rem;
	border-radius: 4px;
	background: var(--color-ink, #263229);
	box-shadow: 0 1rem 2.5rem
		color-mix(in srgb, var(--color-ink, #263229) 34.9%, transparent);
	color: color-mix(in srgb, var(--color-cream, #f3efe5) 90.2%, transparent);
	font:
		400 0.82rem/1.6 Manrope,
		"Manrope Fallback",
		sans-serif;
}

.ft-cite-card[hidden] {
	display: none;
}

.ft-cite-card-number {
	color: #c9a96e;
	font:
		500 1.35rem/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-cite-card-text {
	overflow-wrap: anywhere;
}

.ft-cite-card a {
	color: #c9a96e;
}

.ft-cite-card-go {
	grid-column: 2;
	font-size: 0.72rem;
	font-weight: 600;
}

/* The reading tools hub-reader.js adds (none of them is there without it). */

/* A short message at the foot of the screen ("Link copied"), in the highlight note's look. */
.ft-hub-toast {
	margin: 0;
	padding: 0.7rem 1.2rem;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.3s,
		translate 0.3s;
	translate: -50% 0.5rem;
}

.ft-hub-toast.is-shown {
	opacity: 1;
	translate: -50% 0;
}

/* Text size and Listen, under the date and author: three "A" buttons (Small, Medium, Large; the chosen one filled)
   and a Listen pill,
   each at least 2.75rem tall so a finger finds it. On a phone the two share the row, the label left out. */

/* Classes doubled to beat the flow layout's zero margins. */
.ft-hub-reading-tools.ft-hub-reading-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	max-width: var(--ft-hub-measure);
	margin-top: 1.1rem;
}

.ft-hub-size {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ft-hub-tool-label {
	margin-right: 0.4rem;
	color: var(--ft-hub-muted);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-hub-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border: 1px solid
		color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	border-radius: 999px;
	color: var(--color-ink, #263229);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.3s,
		border-color 0.3s,
		color 0.3s;
}

.ft-hub-tool.is-size {
	padding: 0;
	font:
		500 1rem/1 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-hub-tool.is-size.is-small {
	font-size: 0.85rem;
}

.ft-hub-tool.is-size.is-medium {
	font-size: 1.1rem;
}

.ft-hub-tool.is-size.is-large {
	font-size: 1.4rem;
}

@media (hover: hover) {
	.ft-hub-tool:hover:not(:disabled) {
		border-color: var(--color-ink, #263229);
		background: var(--color-ink, #263229);
		color: var(--color-cream, #f3efe5);
	}
}

.ft-hub-tool:focus-visible,
.ft-hub-tool[aria-pressed="true"] {
	border-color: var(--color-ink, #263229);
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-hub-tool:disabled {
	opacity: 0.35;
	cursor: default;
}

/* A speaker before "Listen"; two bars while it reads. */
.ft-hub-listen-play::before {
	width: 1rem;
	height: 1rem;
	background: currentcolor;
	content: "";
	mask: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.ft-hub-listen-play[data-state="playing"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
}

/* Print, and Display: a printer before "Print", and two letters before "Display", whose arrow turns while its
   panel is open. */
.ft-hub-print-tool::before,
.ft-hub-display-toggle::before {
	width: 1rem;
	height: 1rem;
	background: currentcolor;
	content: "";
	mask: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H4v-7h16v7h-3'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.ft-hub-display-toggle::before {
	mask-image: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19 8.5 5 14 19M5 14h7M15.5 11.5a3 3 0 0 1 5.5 1.5v6M21 15.5c-2-.5-6-.6-6 1.8 0 2.6 4.5 2.2 6-.3'/%3E%3C/svg%3E");
}

.ft-hub-display-toggle::after {
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.1rem;
	border-right: 1.5px solid;
	border-bottom: 1.5px solid;
	content: "";
	rotate: 45deg;
	translate: 0 -0.12rem;
	transition:
		rotate 0.3s,
		translate 0.3s;
}

.ft-hub-display-toggle[aria-expanded="true"]::after {
	rotate: 225deg;
	translate: 0 0.12rem;
}

/* The Display panel, under the tools row: page color, line spacing and font, each a row of choices drawn in what
   they choose (the colors as a swatch, the fonts in their own letters). */
.ft-hub-display.ft-hub-display {
	display: grid;
	flex: 1 0 100%;
	gap: 1rem;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--ft-hub-rule);
	background: var(--color-cream, #f3efe5);
}

.ft-hub-display[hidden] {
	display: none;
}

.ft-hub-display-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ft-hub-display-group > .ft-hub-tool-label {
	min-width: 7.5rem;
}

.ft-hub-tool.is-choice {
	min-height: 2.75rem;
	padding: 0 1rem;
	font-size: 0.85rem;
}

.ft-hub-tool.is-choice[data-choice="paper"]::before,
.ft-hub-tool.is-choice[data-choice="sepia"]::before,
.ft-hub-tool.is-choice[data-choice="night"]::before {
	width: 1rem;
	height: 1rem;
	border: 1px solid #26322966;
	border-radius: 50%;
	background: #e9e2d4;
	content: "";
}

.ft-hub-tool.is-choice[data-choice="sepia"]::before {
	background: #ecdfc4;
}

.ft-hub-tool.is-choice[data-choice="night"]::before {
	border-color: #f3efe580;
	background: #1d2520;
}

.ft-hub-tool.is-choice[data-choice="serif"] {
	font:
		500 0.95rem/1 "Source Serif 4",
		"Source Serif 4 Fallback",
		Georgia,
		serif;
}

.ft-hub-tool.is-choice[data-choice="easy"] {
	font:
		600 0.9rem/1 "Atkinson Hyperlegible Next",
		Verdana,
		sans-serif;
}

@media (max-width: 40rem) {
	.ft-hub-reading-tools .ft-hub-display-group > .ft-hub-tool-label {
		position: static;
		flex: 1 0 100%;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

/* Page color: Paper is the design; Sepia (warmer, browner ink) and Night (light text on dark green, for reading in
   the dark) re-tone the hub and the reader's own popups by redefining the palette's custom properties, which the
   hub's rules and the reference utilities read. The cards that show a source or a glossary term stay dark. On
   paper every page prints as Paper. */
@media screen {
	html[data-ft-hub-theme="sepia"]
		:is(.ft-hub, .ft-hub-sectionbar, .ft-hub-highlight-note) {
		--color-ink: #3a2e22;
		--color-cream: #f6ecda;
		--color-paper: #ecdfc4;
		--color-wine: #7a3826;
	}

	html[data-ft-hub-theme="night"]
		:is(.ft-hub, .ft-hub-sectionbar, .ft-hub-highlight-note) {
		--color-ink: #e4dccb;
		--color-cream: #141a16;
		--color-paper: #1c2420;
		--color-wine: #e3a79e;
		color-scheme: dark;
	}

	html:is([data-ft-hub-theme="sepia"], [data-ft-hub-theme="night"])
		:is(.ft-hub, .ft-hub-sectionbar, .ft-hub-highlight-note) {
		--ft-hub-rule: color-mix(in srgb, var(--color-ink) 12%, transparent);
		--ft-hub-muted: color-mix(in srgb, var(--color-ink) 74%, transparent);
		--ft-hub-soft: color-mix(in srgb, var(--color-ink) 75%, transparent);
		--ft-hub-tint: color-mix(in srgb, var(--color-ink) 5%, transparent);
	}

	html:is([data-ft-hub-theme="sepia"], [data-ft-hub-theme="night"]) .ft-hub {
		background: var(--color-cream);
		color: var(--color-ink);
	}

	html:is([data-ft-hub-theme="sepia"], [data-ft-hub-theme="night"])
		.ft-hub-text.ft-hub-text {
		color: var(--color-ink);
	}

	/* Photos a little dimmer at night, so they do not glare. */
	html[data-ft-hub-theme="night"] .ft-hub :is(img, video) {
		filter: brightness(0.85);
	}

	/* Over the hub, the header that turns cream on scroll takes the page color too (its menus with it). */
	html[data-ft-hub-theme="sepia"] body:has(.ft-hub) .ft-header.is-scrolled {
		--color-ink: #3a2e22;
		--color-cream: #f6ecda;
		--color-wine: #7a3826;
	}

	html[data-ft-hub-theme="night"] body:has(.ft-hub) .ft-header.is-scrolled {
		--color-ink: #e4dccb;
		--color-cream: #141a16;
		--color-paper: #1c2420;
		--color-wine: #e3a79e;
		color-scheme: dark;
	}

	html[data-ft-hub-theme="night"]
		body:has(.ft-hub)
		.ft-header.is-scrolled
		.ft-brand-logo {
		filter: brightness(0) invert(0.95) sepia(0.12);
	}

	html[data-ft-hub-theme="night"] :is(.ft-cite-card, .ft-term-card) {
		outline: 1px solid #f3efe540;
	}
}

/* Roomier lines: more space between lines, words and paragraphs (within what WCAG 1.4.12 asks a page to allow),
   for readers who lose their place in dense text. */
html[data-ft-hub-spacing="roomy"]
	.ft-hub-article
	:is(.ft-hub-text, .ft-hub-standfirst) {
	word-spacing: 0.08em;
	letter-spacing: 0.01em;
}

html[data-ft-hub-spacing="roomy"]
	.ft-hub-article
	:is(
		.ft-hub-text,
		.ft-hub-text :is(p, li, summary, blockquote, figcaption, dd),
		.ft-hub-standfirst
	) {
	line-height: 1.95;
}

html[data-ft-hub-spacing="roomy"] .ft-hub-article .ft-hub-text > * + * {
	margin-block-start: 1.6em !important;
}

html[data-ft-hub-spacing="roomy"]
	.ft-hub-article
	.ft-hub-text
	.wp-block-list
	li
	+ li {
	margin-top: 0.8em;
}

/* Easy to read: Atkinson Hyperlegible Next for the title, summary and text, headings included, at the reader's
   text size (its letters are larger than the serif's, which suits the readers who choose it). */
html[data-ft-hub-font="easy"]
	.ft-hub-article
	:is(
		.ft-hub-article-title,
		.ft-hub-standfirst,
		.ft-hub-text,
		.ft-hub-text
			:is(h2, h3, h4, summary, p, li, blockquote, figcaption, cite)
	) {
	font-family: "Atkinson Hyperlegible Next", Verdana, sans-serif;
}

html[data-ft-hub-font="easy"]
	.ft-hub-article
	:is(.ft-hub-article-title, .ft-hub-text h2, .ft-hub-text h3) {
	font-weight: 600;
	letter-spacing: 0;
}

html[data-ft-hub-font="easy"]
	.ft-hub-article
	.ft-hub-article-title.ft-hub-article-title {
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
	line-height: 1.15;
}

html[data-ft-hub-font="easy"] .ft-hub-article .ft-hub-text.ft-hub-text h2 {
	font-size: calc(
		clamp(1.4rem, 1.25rem + 0.5vw, 1.65rem) * var(--ft-hub-text-scale, 1)
	);
}

html[data-ft-hub-font="easy"] .ft-hub-article .ft-hub-text.ft-hub-text h3 {
	font-size: calc(
		clamp(1.2rem, 1.1rem + 0.3vw, 1.35rem) * var(--ft-hub-text-scale, 1)
	);
}

@media (max-width: 40rem) {
	.ft-hub-reading-tools .ft-hub-tool-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ft-hub-reading-tools.ft-hub-reading-tools {
		justify-content: space-between;
	}

	.ft-hub-reading-tools .ft-hub-listen-play {
		flex: 1 1 auto;
		max-width: 12rem;
	}
}

/* The player: a dark bar at the foot of the screen while the article is read aloud, with the heading being read,
   back, pause or resume, on, the speed and stop, and how far through the reading is. */
.ft-hub-player {
	position: fixed;
	z-index: 55;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1.5rem;
	padding: 0.85rem clamp(1rem, 4vw, 2rem)
		calc(0.85rem + env(safe-area-inset-bottom, 0px));
	background: var(--color-ink, #263229);
	box-shadow: 0 -0.75rem 2rem
		color-mix(in srgb, var(--color-ink, #263229) 23.92%, transparent);
	color: var(--color-cream, #f3efe5);
	animation: ft-player-in 0.3s ease;
}

@keyframes ft-player-in {
	from {
		opacity: 0;
		translate: 0 100%;
	}
}

.ft-hub-player-progress {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: #c9a96e;
	transform: scaleX(var(--ft-progress, 0));
	transform-origin: left;
	transition: transform 0.3s;
}

.ft-hub-player-where {
	display: grid;
	flex: 1 1 14rem;
	gap: 0.15rem;
	max-width: 30rem;
	min-width: 0;
	margin: 0;
}

.ft-hub-player-label,
.ft-hub-player-voice-label {
	color: #c9a96e;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-hub-player.is-paused .ft-hub-player-label::after {
	content: " · paused";
}

.ft-hub-player-part {
	overflow: hidden;
	font-size: 0.9rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ft-hub-player-controls {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ft-hub-player-button,
.ft-hub-player-speed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	transition:
		background-color 0.2s,
		opacity 0.2s;
}

/* Hover only where there is a pointer to hover with: on a touch screen it would stick after a tap. */
@media (hover: hover) {
	.ft-hub-player-button:hover:not(:disabled),
	.ft-hub-player-speed:hover {
		background: color-mix(
			in srgb,
			var(--color-cream, #f3efe5) 12.16%,
			transparent
		);
	}

	.ft-hub-player-button.is-play:hover {
		background: #c9a96e;
	}
}

.ft-hub-player-button:focus-visible,
.ft-hub-player-speed:focus-visible {
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 12.16%,
		transparent
	);
}

.ft-hub-player-button:disabled {
	opacity: 0.3;
	cursor: default;
}

.ft-hub-player-button::before {
	width: 1.25rem;
	height: 1.25rem;
	background: currentcolor;
	content: "";
	mask: var(--ft-icon) center / contain no-repeat;
}

.ft-hub-player-button.is-play {
	width: 3.25rem;
	height: 3.25rem;
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
}

.ft-hub-player-button.is-play:focus-visible {
	background: #c9a96e;
}

.ft-hub-player-button.is-play::before {
	width: 1.4rem;
	height: 1.4rem;
}

.ft-hub-player-button.is-back {
	--ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='2.5' height='14' rx='1'/%3E%3Cpath d='M19 5.5v13a1 1 0 0 1-1.5.86L9 12.86a1 1 0 0 1 0-1.72l8.5-6.5A1 1 0 0 1 19 5.5z'/%3E%3C/svg%3E");
}

.ft-hub-player-button.is-next {
	--ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='16.5' y='5' width='2.5' height='14' rx='1'/%3E%3Cpath d='M5 5.5v13a1 1 0 0 0 1.5.86L15 12.86a1 1 0 0 0 0-1.72l-8.5-6.5A1 1 0 0 0 5 5.5z'/%3E%3C/svg%3E");
}

.ft-hub-player-button.is-play[data-state="playing"] {
	--ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
}

.ft-hub-player-button.is-play[data-state="paused"] {
	--ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10-6.5a1 1 0 0 0 0-1.72l-10-6.5A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E");
}

.ft-hub-player-button.is-stop {
	--ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3C/svg%3E");
	margin-left: 0.25rem;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 34.9%, transparent);
}

.ft-hub-player-speed {
	min-width: 3.25rem;
	padding: 0 0.6rem;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 34.9%, transparent);
	font-size: 0.82rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* The voice picker beside the controls (hub-reader.js fills it with the natural-sounding voices of the browser). */
.ft-hub-player-voice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ft-hub-player-voice[hidden] {
	display: none;
}

.ft-hub-player-voice select {
	max-width: 12rem;
	height: 2.75rem;
	padding: 0 2rem 0 0.9rem;
	border: 1px solid
		color-mix(in srgb, var(--color-cream, #f3efe5) 34.9%, transparent);
	border-radius: 999px;
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23f3efe5' stroke-width='1.5'/%3E%3C/svg%3E")
		no-repeat right 0.85rem center / 0.65rem;
	color: inherit;
	font: inherit;
	font-size: 0.82rem;
	appearance: none;
	cursor: pointer;
}

.ft-hub-player-voice select:focus-visible {
	outline: 2px solid #c9a96e;
	outline-offset: 2px;
}

.ft-hub-player-voice option {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

/* Room at the end of the page for the player, and messages lifted above it. */
html.ft-is-listening body {
	padding-bottom: 6.5rem;
}

html.ft-is-listening :is(.ft-hub-toast, .ft-hub-highlight-note) {
	bottom: 7rem;
}

@media (max-width: 40rem) {
	.ft-hub-player {
		gap: 0.6rem;
		padding-top: 0.75rem;
	}

	.ft-hub-player-where {
		flex-basis: 100%;
		text-align: center;
	}

	.ft-hub-player-controls {
		justify-content: space-between;
		width: 100%;
		max-width: 22rem;
	}

	html.ft-is-listening body {
		padding-bottom: 9rem;
	}

	.ft-hub-player-voice {
		justify-content: center;
		width: 100%;
	}

	html.ft-is-listening body:has(.ft-hub-player-voice:not([hidden])) {
		padding-bottom: 12rem;
	}

	html.ft-is-listening :is(.ft-hub-toast, .ft-hub-highlight-note) {
		bottom: 9.5rem;
	}

	html.ft-is-listening
		body:has(.ft-hub-player-voice:not([hidden]))
		:is(.ft-hub-toast, .ft-hub-highlight-note) {
		bottom: 12.5rem;
	}
}

/* The part being read aloud, the title and summary included; where the browser can mark a stretch of text
   (the CSS Custom Highlight API), the sentence being spoken is marked more strongly within it. */
.ft-hub-text .is-spoken,
.ft-hub-article > .is-spoken {
	border-radius: 2px;
	background: #c9a96e33;
	box-shadow: 0 0 0 0.35rem #c9a96e33;
}

html.ft-has-spoken-sentence
	:is(.ft-hub-text .is-spoken, .ft-hub-article > .is-spoken) {
	background: #c9a96e1a;
	box-shadow: 0 0 0 0.35rem #c9a96e1a;
}

::highlight(ft-spoken) {
	background-color: #c9a96e66;
	color: inherit;
}

/* "You were reading …": a cream note under the tools, to go back to where the reader left off. */
.ft-hub-resume.ft-hub-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	max-width: var(--ft-hub-measure);
	margin-top: 1.25rem;
	padding: 0.75rem 0.75rem 0.75rem 1.1rem;
	border: 1px solid var(--ft-hub-rule);
	border-left: 2px solid var(--color-wine, #713e3d);
	background: var(--color-cream, #f3efe5);
}

.ft-hub-resume-text {
	flex: 1 1 14rem;
	margin: 0;
	color: var(--ft-hub-soft);
	font-size: 0.88rem;
	line-height: 1.5;
}

.ft-hub-resume-text strong {
	color: var(--color-ink, #263229);
	font-weight: 600;
}

.ft-hub-resume-go {
	min-height: 2.25rem;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.ft-hub-resume-go:hover,
.ft-hub-resume-go:focus-visible {
	background: var(--color-ink, #263229);
}

.ft-hub-resume-close {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--ft-hub-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.ft-hub-resume-close:hover,
.ft-hub-resume-close:focus-visible {
	background: var(--ft-hub-tint);
	color: var(--color-ink, #263229);
}

/* A link button after each heading of the text: faint until the heading is pointed at, always there on touch. Its
   negative right margin lets it hang past the last word instead of wrapping onto a line of its own, into room the
   heading keeps for it on its right, so it never sticks out of the heading (on phones the text runs to the screen's
   edge); wider, it sits in the margin before the heading. */
:is(.ft-hub-text, .ft-editorial-content) :is(h2, h3):has(> .ft-hub-anchor) {
	position: relative;
}

@media (max-width: 55.99rem) {
	:is(.ft-hub-text, .ft-editorial-content) :is(h2, h3):has(> .ft-hub-anchor) {
		padding-right: 1.1rem;
	}
}

.ft-hub-anchor {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0 -1.1rem 0 0.3rem;
	border-radius: 50%;
	background: currentcolor;
	vertical-align: 0.05em;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.2s;
	mask: 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.8' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E")
		center / 62% no-repeat;
}

:is(.ft-hub-text, .ft-editorial-content) :is(h2, h3):hover .ft-hub-anchor,
.ft-hub-anchor:focus-visible {
	opacity: 0.55;
}

.ft-hub-anchor:hover,
.ft-hub-anchor:focus-visible {
	opacity: 1 !important;
	color: var(--color-wine, #713e3d);
}

@media (pointer: coarse) {
	.ft-hub-anchor {
		opacity: 0.35;
	}
}

@media (min-width: 56rem) {
	.ft-hub-anchor {
		position: absolute;
		top: 0.15em;
		left: -2.1rem;
		width: 1.6rem;
		height: 1.6rem;
		margin: 0;
	}
}

/* Articles read to the end, in the tree and the lists. */
.ft-hub-read-note {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.5em;
	color: var(--ft-hub-muted);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: 0.15em;
	white-space: nowrap;
}

.ft-hub-read-note::before {
	content: "✓";
	font-size: 0.8rem;
	letter-spacing: 0;
}

.ft-hub-story .ft-hub-read-note {
	margin: auto 1.3rem 1.1rem;
	padding-top: 0.75rem;
}

/* A glossary term, underlined with dots, opens a card explaining it. */
.ft-term {
	border-radius: 1px;
	text-decoration: underline dotted
		color-mix(in srgb, var(--color-ink, #263229) 50.2%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	cursor: help;
}

.ft-term:hover,
.ft-term:focus-visible,
.ft-term[aria-expanded="true"] {
	background: #c9a96e33;
	text-decoration-color: var(--color-wine, #713e3d);
}

.ft-term-card {
	display: block;
}

.ft-term-card-title {
	margin: 0 0 0.3rem;
	color: #c9a96e;
	font:
		500 1.2rem/1.2 "Cormorant Garamond",
		"Cormorant Garamond Fallback",
		serif;
}

.ft-term-card-text {
	margin: 0;
}

/* The section bar: under the header on screens where "On this page" is folded above the text, shown once that list
   has scrolled away and until the text ends. It names the part being read, and opens the list. */
.ft-hub-sectionbar {
	position: fixed;
	z-index: 45;
	right: 0;
	left: 0;
	border-bottom: 1px solid var(--ft-hub-rule);
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 96.08%,
		transparent
	);
	box-shadow: 0 0.6rem 1.5rem -1rem
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.25s,
		translate 0.25s;
	translate: 0 -0.5rem;
	backdrop-filter: blur(8px);
}

.ft-hub-sectionbar.is-shown {
	opacity: 1;
	pointer-events: auto;
	translate: 0 0;
}

.ft-hub-sectionbar-toggle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.9rem;
	padding: 0.35rem clamp(1.25rem, 5vw, 2rem);
	color: var(--color-ink, #263229);
	text-align: left;
	cursor: pointer;
}

.ft-hub-sectionbar-toggle::after {
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	content: "";
	rotate: 45deg;
	translate: 0 -0.15rem;
	transition: rotate 0.25s;
}

.ft-hub-sectionbar.is-open .ft-hub-sectionbar-toggle::after {
	rotate: 225deg;
	translate: 0 0.1rem;
}

.ft-hub-sectionbar-label {
	color: var(--ft-hub-muted);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ft-hub-sectionbar-current {
	overflow: hidden;
	font-size: 0.86rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* How far through the text the reader is, as a wine line along the bar's lower edge. */
.ft-hub-sectionbar-progress {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--color-wine, #713e3d);
	transform: scaleX(var(--ft-progress, 0));
	transform-origin: left;
}

.ft-hub-sectionbar-list {
	max-height: min(60vh, 28rem);
	overflow-y: auto;
	padding: 0.25rem clamp(1.25rem, 5vw, 2rem) 1rem;
	border-top: 1px solid var(--ft-hub-rule);
	overscroll-behavior: contain;
}

.ft-hub-sectionbar-list[hidden] {
	display: none;
}

.ft-hub-sectionbar-list ol {
	margin: 0;
	padding: 0.5rem 0 0;
	list-style: none;
}

.ft-hub-sectionbar-list li.is-level-3 {
	padding-left: 0.9rem;
}

.ft-hub-sectionbar-list a {
	display: block;
	padding: 0.5rem 0 0.5rem 0.8rem;
	border-left: 2px solid var(--ft-hub-rule);
	color: var(--ft-hub-soft);
	font-size: 0.92rem;
	line-height: 1.4;
	text-decoration: none;
}

.ft-hub-sectionbar-list a[aria-current] {
	border-left-color: var(--color-wine, #713e3d);
	color: var(--color-ink, #263229);
	font-weight: 600;
}

body.admin-bar .ft-hub-sectionbar-list {
	max-height: min(55vh, 26rem);
}

@media (min-width: 80rem) {
	.ft-hub-sectionbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-hub-sectionbar,
	.ft-hub-toast {
		transition: none;
	}
}

/* Phones and narrow tablets: one column, the tree folded into "Browse topics". */
@media (max-width: 55.99rem) {
	.ft-hub {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 1.5rem;
	}

	.ft-hub > .wp-block-template-part {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* On a phone the search box stays where it is (held on screen it would cover too much of it), and the matching
	   topics are measured against the screen. */
	.ft-hub-search {
		position: relative;
	}

	.ft-hub-search::after {
		content: none;
	}

	.ft-hub-tree.is-narrowed .ft-hub-tree-list {
		max-height: 50vh;
	}

	.ft-hub-search-hint {
		display: none;
	}

	.ft-hub-browse {
		border: 1px solid var(--ft-hub-rule);
		background: var(--color-paper, #e9e2d4);
	}

	.ft-hub-tree .ft-hub-browse > summary {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.9rem 1.1rem;
		color: var(--color-ink, #263229);
	}

	.ft-hub-browse[open] > summary {
		border-bottom: 1px solid var(--ft-hub-rule);
	}

	.ft-hub-browse > :not(summary) {
		margin-inline: 1.1rem;
	}

	.ft-hub-browse > .ft-hub-home {
		margin-top: 0.9rem;
	}

	.ft-hub-browse > .ft-hub-tree-list {
		margin-bottom: 1rem;
	}

	/* On a phone the text uses the screen: the reader loses its border and most of its padding. */
	.ft-hub-reader {
		margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem));
		padding-inline: clamp(1.25rem, 5vw, 2rem);
		border-inline: 0;
	}
}

@media print {
	body.ft-hub-page
		:is(header.wp-block-template-part, footer.wp-block-template-part),
	.ft-hub-band,
	.ft-hub > .wp-block-template-part,
	.ft-hub-contents,
	.ft-hub-talk-button,
	.ft-hub-results.is-related,
	.ft-article-comments,
	.ft-article-cta,
	.ft-cite-controls,
	.ft-cite-files,
	.ft-cite-sources,
	.ft-hub-print-row,
	.ft-share,
	.ft-hub-back,
	.ft-hub-highlight-note,
	.ft-cite-card,
	.ft-hub-sectionbar,
	.ft-hub-reading-tools,
	.ft-hub-resume,
	.ft-hub-anchor,
	.ft-hub-toast,
	.ft-hub-player {
		display: none !important;
	}

	.ft-hub {
		display: block;
		padding: 0;
	}

	/* Printed pages are narrow enough for the phone layout, whose reader reaches past the screen's edges. */
	.ft-hub-reader {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.ft-hub-text.ft-hub-text,
	.ft-hub-tools.ft-hub-tools {
		max-width: none;
		font-size: 11pt;
	}

	/* A source's address in full, unless the link already shows it (hub-reader.js marks those before printing). */
	.ft-references a[href^="http"]:not(.is-address)::after {
		content: " <" attr(href) ">";
		font-size: 0.85em;
		overflow-wrap: anywhere;
	}

	.ft-hub mark,
	.ft-hub-mark,
	.ft-hub-text .is-spoken,
	.ft-hub-article > .is-spoken {
		background: none;
		box-shadow: none;
	}

	.ft-term-card {
		display: none !important;
	}

	/* An article on paper, for a reader to take to their doctor: its photo kept small, every question opened
	   (hub-reader.js opens them before printing and closes them after), headings kept with what follows, and the
	   address it came from and the day it was printed at the end. */
	.ft-hub-featured img {
		max-height: 8cm;
		object-fit: cover;
	}

	.ft-hub-text :is(h2, h3, summary) {
		break-after: avoid;
	}

	.ft-hub-text :is(figure, blockquote, li) {
		break-inside: avoid;
	}

	.ft-hub-text details > summary {
		list-style: none;
		font-weight: 600;
	}

	.ft-hub-text .wp-block-details summary::after {
		display: none;
	}

	.ft-hub-text .wp-block-details > :not(summary) {
		padding-right: 0;
	}

	.ft-hub-text details > summary::-webkit-details-marker {
		display: none;
	}

	.ft-hub-print-source.ft-hub-print-source {
		display: block;
		margin: 2rem 0 0;
		padding-top: 0.75rem;
		border-top: 1px solid #26322966;
		font-size: 9pt;
		overflow-wrap: anywhere;
	}
}

.ft-hub-print-source {
	display: none;
}

/* A source jumped to from a citation stops below the fixed header. */
.ft-reference {
	scroll-margin-top: 8rem;
}

/* Herb & Medicine Interactions (the fingertips/interaction-checker block, built by the plugin's
   src/front/interactions.js): the checker on a paper panel with a thin ink border (two pickers, then the answer
   in two views: "Simple answer" cards and "How it connects" paths of nodes and edges), then the dictionary of
   every herb and formula as folding entries. Levels share one set of tones: avoid is wine, ask first is gold,
   usually fine is mist. */
.ft-ix,
.ft-ix-record {
	--ft-ix-rule: color-mix(
		in srgb,
		var(--color-ink, #263229) 20%,
		transparent
	);
	--ft-ix-soft: color-mix(
		in srgb,
		var(--color-ink, #263229) 70.2%,
		transparent
	);
	--ft-ix-avoid: var(--color-wine, #713e3d);
	--ft-ix-caution: #c9a96e;
	--ft-ix-monitor: #8fa39a;
}

.ft-ix {
	padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 4vw, 3rem);
	color: var(--color-ink, #263229);
}

.ft-ix > * {
	max-width: 90rem;
	margin-right: auto;
	margin-left: auto;
}

.ft-ix-eyebrow.ft-ix-eyebrow {
	margin: 0 0 0.9rem;
	color: var(--color-wine, #713e3d);
	font:
		600 0.64rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ft-ix-title.ft-ix-title {
	margin: 0 0 1rem;
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: var(--wp--preset--font-size--heading-medium);
	font-weight: 400;
	line-height: 1.05;
}

.ft-ix-intro,
.ft-ix-start {
	max-width: 40rem;
	margin: 0 0 2rem;
	color: var(--ft-ix-soft);
}

.ft-ix-checker {
	--ft-ix-pad: clamp(1.25rem, 4vw, 3rem);
	margin-bottom: clamp(3.5rem, 7vw, 6rem);
	padding: var(--ft-ix-pad);
	border: 1px solid var(--ft-ix-rule);
	background: var(--color-paper, #e9e2d4);
}

.ft-ix-pickers {
	display: grid;
	gap: 1.5rem 2.5rem;
	margin: 2rem 0;
}

@media (min-width: 48rem) {
	.ft-ix-pickers {
		grid-template-columns: 1fr 1fr;
	}
}

.ft-ix-picker-label {
	display: block;
	margin-bottom: 0.6rem;
	font:
		600 0.62rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-combo {
	position: relative;
}

.ft-ix-input.ft-ix-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ft-ix-rule);
	border-radius: 0;
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
	font: inherit;
	font-size: 1rem;
	appearance: none;
}

.ft-ix-input::-webkit-search-cancel-button,
.ft-ix-input::-webkit-search-decoration {
	appearance: none;
}

.ft-ix-input:focus {
	border-color: var(--color-ink, #263229);
	outline: 1px solid var(--color-ink, #263229);
}

.ft-ix-suggestions.ft-ix-suggestions {
	position: absolute;
	z-index: 5;
	top: calc(100% - 1px);
	right: 0;
	left: 0;
	max-height: 20rem;
	margin: 0;
	padding: 0.35rem 0;
	overflow: auto;
	border: 1px solid var(--color-ink, #263229);
	background: var(--color-cream, #f3efe5);
	box-shadow: 0 18px 40px -24px
		color-mix(in srgb, var(--color-ink, #263229) 50.2%, transparent);
	list-style: none;
}

.ft-ix-suggestion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.65rem 1rem 0.65rem calc(1rem - 3px);
	border-left: 3px solid transparent;
	cursor: pointer;
}

.ft-ix-suggestion[aria-selected="true"] {
	border-left-color: var(--color-wine, #713e3d);
	background: color-mix(in srgb, var(--color-ink, #263229) 5.1%, transparent);
}

.ft-ix-suggestion--none {
	color: var(--ft-ix-soft);
	cursor: default;
}

.ft-ix-suggestion-name {
	font-weight: 600;
}

.ft-ix-suggestion-kind {
	margin-left: auto;
	color: var(--ft-ix-soft);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-suggestion-other {
	flex-basis: 100%;
	overflow: hidden;
	color: var(--ft-ix-soft);
	font-size: 0.82rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ft-ix-chips.ft-ix-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.ft-ix-chip {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	margin: 0;
	padding: 0.3rem 0.35rem 0.3rem 0.85rem;
	border: 1px solid var(--color-ink, #263229);
	border-radius: 999px;
	background: var(--color-cream, #f3efe5);
	font-size: 0.9rem;
}

.ft-ix-chip--formula,
.ft-ix-chip--group {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-chip-remove {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ft-ix-chip-remove::before {
	content: "×";
	font-size: 1.1rem;
	line-height: 1;
}

.ft-ix-chip-remove:hover,
.ft-ix-chip-remove:focus-visible {
	background: color-mix(
		in srgb,
		var(--color-ink, #263229) 12.55%,
		transparent
	);
}

.ft-ix-chip--formula .ft-ix-chip-remove:hover,
.ft-ix-chip--group .ft-ix-chip-remove:hover {
	background: color-mix(
		in srgb,
		var(--color-cream, #f3efe5) 20%,
		transparent
	);
}

/* The workspace's bar: its three tabs, the names in the check and the most serious level, kept under the header
   while the page scrolls through any of the views. */
.ft-ix-bar {
	position: sticky;
	z-index: 3;
	top: var(--ft-ix-bar-top, 0);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	align-items: center;

	/* Edge to edge across the panel, in its colour, so the views scroll under it. */
	margin: 2.5rem calc(-1 * var(--ft-ix-pad)) 1.75rem;
	padding: 0.85rem var(--ft-ix-pad);
	border-top: 1px solid var(--ft-ix-rule);
	border-bottom: 1px solid var(--ft-ix-rule);
	background: var(--color-paper, #e9e2d4);
}

/* On a phone the names in the check stay on one line that scrolls sideways, so the bar stays short. */
@media (max-width: 40rem) {
	.ft-ix-bar {
		gap: 0.5rem;
	}

	.ft-ix-bar-choices.ft-ix-bar-choices {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ft-ix-bar-choices .ft-ix-chip {
		flex: none;
	}

	.ft-ix-bar .ft-ix-status {
		font-size: 0.8rem;
	}
}

.ft-ix-bar-choices.ft-ix-bar-choices {
	display: flex;
	flex: 1 1 12rem;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-ix-bar-choices .ft-ix-chip {
	padding: 0.1rem 0.15rem 0.1rem 0.65rem;
	font-size: 0.8rem;
}

.ft-ix-bar-choices .ft-ix-chip-remove {
	width: 1.25rem;
	height: 1.25rem;
}

/* While the pickers, which show the chosen names too, are on the screen, the bar keeps its place for them empty. */
.ft-ix-bar-choices {
	transition: opacity 0.25s ease;
}

.ft-ix-bar.is-near-pickers .ft-ix-bar-choices {
	visibility: hidden;
	opacity: 0;
}

.ft-ix-views {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.25rem;
}

.ft-ix-view {
	position: relative;
	padding: 0.3rem 0;
	border: 0;
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.65rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.78;
	transition: opacity 0.3s ease;
}

.ft-ix-view::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.2rem;
	left: 0;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.ft-ix-view:hover,
.ft-ix-view:focus-visible,
.ft-ix-view[aria-selected="true"] {
	opacity: 1;
}

.ft-ix-view[aria-selected="true"]::after {
	transform: scaleX(1);
}

.ft-ix-status {
	margin: 0;
	color: var(--ft-ix-soft);
	font-size: 0.9rem;
}

/* The answer's cards, one under another across the whole width. */
.ft-ix-pane--answer:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ft-ix-card {
	padding: clamp(1rem, 2.5vw, 1.75rem);
	border: 1px solid var(--ft-ix-rule);
	border-top: 3px solid var(--ft-ix-level, var(--ft-ix-rule));
	background: var(--color-cream, #f3efe5);
}

.ft-ix-card--avoid {
	--ft-ix-level: var(--ft-ix-avoid);
}

.ft-ix-card--caution {
	--ft-ix-level: var(--ft-ix-caution);
}

.ft-ix-card--monitor {
	--ft-ix-level: var(--ft-ix-monitor);
}

/* A chosen herb or formula that is, or holds, a toxic herb: its own card, first, in the wine of the strongest
   warning. */
.ft-ix-card--toxic {
	--ft-ix-level: var(--ft-ix-avoid);
	background: #f6ecea;
}

.ft-ix-card-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.ft-ix-card-kind.ft-ix-card-kind {
	margin: 0 0 0.35rem;
	color: var(--ft-ix-soft);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-card-title.ft-ix-card-title {
	margin: 0 0 0.75rem;
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: var(--wp--preset--font-size--heading-card);
	font-weight: 500;
	line-height: 1.1;
}

.ft-ix-card-head .ft-ix-card-title {
	margin: 0;
}

.ft-ix-badge {
	display: inline-block;
	flex: none;
	padding: 0.3rem 0.6rem;
	border: 1px solid transparent;
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ft-ix-badge--avoid {
	background: var(--ft-ix-avoid);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-badge--caution {
	background: var(--ft-ix-caution);
	color: var(--color-ink, #263229);
}

.ft-ix-badge--monitor {
	background: #dce2df;
	color: var(--color-ink, #263229);
}

.ft-ix-badge--none {
	border-color: var(--ft-ix-rule);
	color: var(--ft-ix-soft);
}

/* Toxicity grades are outlined in wine, so they never read as an interaction level; banned and highly toxic herbs
   are filled. */
.ft-ix-tox {
	border-color: var(--ft-ix-avoid);
	background: transparent;
	color: var(--ft-ix-avoid);
}

.ft-ix-tox--high,
.ft-ix-tox--banned {
	background: var(--ft-ix-avoid);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-tox [lang="zh"] {
	letter-spacing: 0.05em;
}

/* Chinese names beside the pinyin, in the same weight but a quieter tone. */
.ft-ix-zh {
	color: var(--ft-ix-soft);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.ft-ix-chip--formula .ft-ix-zh,
.ft-ix-chip--group .ft-ix-zh,
.ft-ix-node--formula .ft-ix-zh {
	color: inherit;
	opacity: 0.75;
}

.ft-ix-entry-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: flex-end;
}

.ft-ix-safety.ft-ix-safety {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--ft-ix-avoid);
	background: #f6ecea;
	list-style: none;
}

.ft-ix-safety-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: baseline;
	margin: 0;
}

.ft-ix-safety-item + .ft-ix-safety-item {
	margin-top: 0.6rem;
}

.ft-ix-safety-item p {
	flex: 1 1 18rem;
	margin: 0;
	font-size: 0.92rem;
}

.ft-ix-findings.ft-ix-findings,
.ft-ix-paths.ft-ix-paths {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-ix-finding,
.ft-ix-path {
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--ft-ix-rule);
}

.ft-ix-finding:first-child,
.ft-ix-path:first-child {
	border-top: 0;
	padding-top: 0;
}

.ft-ix-finding:last-child,
.ft-ix-path:last-child {
	padding-bottom: 0;
}

.ft-ix-finding-with .ft-ix-members {
	font-size: inherit;
}

.ft-ix-finding p,
.ft-ix-path p {
	margin: 0.5rem 0 0;
}

.ft-ix-finding-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.ft-ix-finding .ft-ix-finding-head p {
	margin: 0;
}

/* Findings with badges: the badges in a column of their own, the words beside them, so badges line up down a card or
   an entry and the words keep the width. Only the first finding of each level has a badge; the rest sit under it. */
@media (min-width: 40rem) {
	.ft-ix-findings:has(.ft-ix-badge) > .ft-ix-finding,
	.ft-ix-safety-item {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		column-gap: 1.5rem;
		align-items: baseline;
	}

	/* Inside the safety box's border and padding, so its words line up with the findings' below. */
	.ft-ix-safety-item {
		grid-template-columns: calc(12rem - 1rem - 3px) minmax(0, 1fr);
	}

	.ft-ix-findings:has(.ft-ix-badge) > .ft-ix-finding > * {
		grid-column: 2;
	}

	.ft-ix-findings:has(.ft-ix-badge) > .ft-ix-finding > .ft-ix-finding-head {
		display: contents;
	}

	.ft-ix-finding-head > .ft-ix-badge {
		grid-column: 1;
		justify-self: start;
		white-space: normal;
	}

	.ft-ix-findings:has(.ft-ix-badge) .ft-ix-finding-head > p {
		grid-column: 2;
	}

	/* A path's row reaches back under the badge column, which is empty there, so the whole path fits. */
	.ft-ix-findings:has(.ft-ix-badge)
		> .ft-ix-finding
		.ft-ix-chain.ft-ix-chain {
		margin-left: -13.5rem;
	}

	.ft-ix-safety-item > .ft-ix-badge {
		grid-column: 1;
		justify-self: start;
	}

	.ft-ix-safety-item > .ft-ix-badge + .ft-ix-badge {
		margin-top: 0.4rem;
	}

	.ft-ix-safety-item > p {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* A finding of the same level as the one above shares its badge, so the two read as one group. */
.ft-ix-finding.ft-ix-finding--same {
	padding-top: 0.25rem;
	border-top: 0;
}

/* What a formula reaches through its herbs, one level at a time: each medicine's name over the herbs that reach it,
   in columns, in a part per kind (medicines, supplements, food and drink) when there is more than one. */
.ft-ix-finding p.ft-ix-via-title,
.ft-ix-finding p.ft-ix-via-kind {
	margin: 0 0 0.45rem;
	color: var(--ft-ix-soft);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* "Ask before combining with" over two lines breaks evenly rather than leaving "with" alone. */
.ft-ix-finding--through .ft-ix-badge {
	text-wrap: balance;
}

.ft-ix-finding-head + .ft-ix-via-part {
	margin-top: 0.65rem;
}

.ft-ix-via-part + .ft-ix-via-part {
	margin-top: 1rem;
}

.ft-ix-via-list.ft-ix-via-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: 0.65rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-ix-via-list > li {
	display: flex;
	flex-direction: column;
	margin: 0;
	line-height: 1.35;
}

.ft-ix-via-list b {
	font-weight: 500;
}

.ft-ix-via-list small {
	color: var(--ft-ix-soft);
	font-size: 0.85rem;
}

/* Each herb opens its own entry, where the finding is told. */
.ft-ix-via-list small a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
	text-underline-offset: 0.2em;
}

.ft-ix-via-list small a:hover,
.ft-ix-via-list small a:focus-visible {
	color: var(--color-wine, #713e3d);
	text-decoration-color: currentcolor;
}

/* Beside the badge, level with it. */
@media (min-width: 40rem) {
	.ft-ix-findings:has(.ft-ix-badge) .ft-ix-finding-head + .ft-ix-via-part {
		margin-top: 0;
	}
}

/* Long lines stay readable however wide the card. */
.ft-ix-finding p,
.ft-ix-details dd,
.ft-ix-about dd,
.ft-ix-none,
.ft-ix-card-about {
	max-width: 72ch;
}

.ft-ix-finding p.ft-ix-chain {
	max-width: none;
}

.ft-ix-finding-head + p {
	margin-top: 0.65rem;
}

.ft-ix-finding-advice,
.ft-ix-finding-formulas,
.ft-ix-finding-timing,
.ft-ix-finding-watch,
.ft-ix-members,
.ft-ix-through,
.ft-ix-none {
	color: var(--ft-ix-soft);
	font-size: 0.92rem;
}

/* When to take them and what to watch for: a small-capital label leads each line. */
.ft-ix-finding-timing,
.ft-ix-finding-watch {
	margin-top: 0.4rem;
}

.ft-ix-finding-label,
.ft-ix-tradition {
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-finding-label {
	margin-right: 0.35rem;
	color: var(--color-ink, #263229);
}

/* A caution handed down by tradition (忌口) is told apart from what studies found. */
.ft-ix-tradition {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.1rem 0.45rem;
	border: 1px dashed var(--ft-ix-rule);
	color: var(--ft-ix-soft);
	vertical-align: 0.1em;
}

/* The answer in a line, above the cards, each count linking to its first card. */
.ft-ix-summary {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
}

.ft-ix-summary p {
	max-width: 72ch;
	margin: 0;
}

.ft-ix-summary-notes {
	margin-top: 0.4rem;
	color: var(--ft-ix-soft);
	font-size: 0.92rem;
}

.ft-ix-summary a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ft-ix-summary-link--avoid {
	text-decoration-color: var(--ft-ix-avoid);
}

.ft-ix-summary-link--avoid.ft-ix-summary-link--avoid {
	color: var(--ft-ix-avoid);
	font-weight: 600;
}

.ft-ix-summary-link--caution {
	text-decoration-color: var(--ft-ix-caution);
	text-decoration-thickness: 2px;
}

.ft-ix-summary a:hover,
.ft-ix-summary a:focus-visible {
	text-decoration-thickness: 2px;
}

/* A path is one row, formula to medicine, so it reads as a line of the network; it scrolls sideways where it does
   not fit. */
.ft-ix-chain.ft-ix-chain {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0 0 0.85rem;
	padding-bottom: 0.35rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ft-ix-chain > * {
	flex: none;
}

.ft-ix-node {
	display: inline-flex;
	flex-direction: column;
	padding: 0.4rem 0.65rem;
	border: 1px solid var(--color-ink, #263229);
	background: var(--color-cream, #f3efe5);
	line-height: 1.2;
}

.ft-ix-node--formula {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-node--group {
	border-style: dashed;
}

.ft-ix-node-kind {
	margin-bottom: 0.2rem;
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.ft-ix-node-name {
	font-weight: 600;
}

.ft-ix-node-list {
	color: var(--ft-ix-soft);
	font-size: 0.88rem;
}

/* An edge: a line with an arrowhead, its words or level on it. */
.ft-ix-edge {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 2.5rem;
	padding: 0 1rem 0 0.4rem;
	color: var(--ft-ix-soft);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ft-ix-edge::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 0.35rem;
	left: 0;
	border-top: 1px solid currentcolor;
}

.ft-ix-edge::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.25rem);
	right: 0.1rem;
	border-top: 0.25rem solid transparent;
	border-bottom: 0.25rem solid transparent;
	border-left: 0.4rem solid currentcolor;
}

.ft-ix-edge > * {
	position: relative;
	z-index: 1;
}

.ft-ix-edge-words {
	padding: 0 0.35rem;
	background: var(--color-cream, #f3efe5);
}

.ft-ix-edge--avoid .ft-ix-edge-words,
.ft-ix-edge--caution .ft-ix-edge-words,
.ft-ix-edge--monitor .ft-ix-edge-words {
	color: var(--color-ink, #263229);
}

.ft-ix-edge--avoid {
	color: var(--ft-ix-avoid);
}

.ft-ix-edge--avoid::before {
	border-top-width: 2px;
}

.ft-ix-edge--caution {
	color: #9a7a3f;
}

.ft-ix-edge--monitor {
	color: var(--ft-ix-monitor);
}

/* On a phone a row would scroll most of a path out of sight, so it runs down instead, one name under another. */
@media (max-width: 39.99rem) {
	.ft-ix-chain.ft-ix-chain {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 0;
		overflow: visible;
	}

	.ft-ix-edge {
		min-width: 0;
		padding: 0.55rem 0 0.75rem 1.4rem;
		margin-left: 0.9rem;
	}

	.ft-ix-edge::before {
		top: 0;
		right: auto;
		bottom: 0.35rem;
		left: 0;
		border-top: 0;
		border-left: 1px solid currentcolor;
	}

	.ft-ix-edge--avoid::before {
		border-left-width: 2px;
	}

	.ft-ix-edge::after {
		top: auto;
		right: auto;
		bottom: 0;
		left: -0.25rem;
		border-top: 0.4rem solid currentcolor;
		border-right: 0.25rem solid transparent;
		border-bottom: 0;
		border-left: 0.25rem solid transparent;
	}

	.ft-ix-edge-words {
		padding: 0;
	}
}

.ft-ix-details {
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 0.4rem 1.25rem;
	margin: 0;
	font-size: 0.92rem;
}

.ft-ix-details dt {
	color: var(--ft-ix-soft);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 2.2;
	text-transform: uppercase;
}

.ft-ix-details dd {
	margin: 0;
}

/* Sources start where the other details do, each on its own line. */
.ft-ix-sources.ft-ix-sources {
	margin: 0;
	padding-left: 0;
	font-size: 0.85rem;
	list-style: none;
}

.ft-ix-sources li + li {
	margin-top: 0.3rem;
}

.ft-ix-sources a {
	color: var(--color-wine, #713e3d);
	overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
	.ft-ix-details {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}

	.ft-ix-details dd {
		margin-bottom: 0.5rem;
	}
}

/* The whole network: four columns of named boxes joined by curves, coloured by level. Pointing at a name dims
   everything but its connections (.is-dimmed on the drawing, .is-on on what stays). It scrolls sideways inside its
   frame on narrow screens rather than shrinking its words. */
.ft-ix-network {
	margin-bottom: 0;
}

.ft-ix-net-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 3rem;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 1.5rem;
}

.ft-ix-net-legend.ft-ix-net-legend {
	display: flex;
	flex: 1 1 24rem;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: 0;
	padding: 0;
	color: var(--ft-ix-soft);
	font-size: 0.85rem;
	list-style: none;
}

.ft-ix-net-key {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	margin: 0;
}

.ft-ix-net-swatch {
	display: inline-block;
	width: 1.75rem;
	border-top: 2px solid var(--ft-ix-rule);
}

.ft-ix-net-key--avoid .ft-ix-net-swatch {
	border-top: 3px solid var(--ft-ix-avoid);
}

.ft-ix-net-key--caution .ft-ix-net-swatch {
	border-top-color: var(--ft-ix-caution);
}

.ft-ix-net-key--monitor .ft-ix-net-swatch {
	border-top-color: var(--ft-ix-monitor);
}

.ft-ix-net-key--contains .ft-ix-net-swatch {
	border-top: 1px dashed
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
}

.ft-ix-net-key--toxic .ft-ix-net-swatch {
	width: 1.5rem;
	height: 0.8rem;
	border: 2px solid var(--ft-ix-avoid);
	border-radius: 0.4rem;
}

/* The drawing at its full height, with the column names kept under the header as the page scrolls past it. Only a
   screen too narrow for all four columns scrolls it sideways (see .is-snapping). */
.ft-ix-net-scroll {
	position: relative;
	padding: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid var(--ft-ix-rule);
	background: var(--color-cream, #f3efe5);
	-webkit-overflow-scrolling: touch;
}

.ft-ix-net-svg {
	display: block;
	max-width: none;
	height: auto;
	margin: 0 auto;
	overflow: visible;
	font-family: Manrope, "Manrope Fallback", sans-serif;
}

.ft-ix-net-scroll-hint.ft-ix-net-scroll-hint {
	margin: 0 0 0.75rem;
	color: var(--ft-ix-soft);
	font-size: 0.85rem;
}

/* On a narrow screen the frame snaps to one column at a time; the column names under the hint say which is shown
   and move to another. */
.ft-ix-net-scroll.is-snapping {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.ft-ix-net-stop {
	position: absolute;
	top: 0;
	height: 1px;
	pointer-events: none;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.ft-ix-net-steer {
	margin: 0 0 0.75rem;
}

.ft-ix-net-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ft-ix-net-step {
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--ft-ix-rule);
	border-radius: 999px;
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.6rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.ft-ix-net-step[aria-current="true"] {
	border-color: var(--color-ink, #263229);
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-net-scroll:focus-visible {
	outline: 2px solid var(--color-wine, #713e3d);
	outline-offset: 2px;
}

.ft-ix-net-heads {
	position: sticky;
	z-index: 1;
	top: var(--ft-ix-heads-top, 0);
	height: 2.75rem;
	margin: 0 auto;
	background: linear-gradient(
		var(--color-cream, #f3efe5) 80%,
		color-mix(in srgb, var(--color-cream, #f3efe5) 0%, transparent)
	);
}

.ft-ix-net-heading {
	position: absolute;
	top: 1rem;
	color: var(--color-ink, #263229);
	font:
		600 10.5px/1.2 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.ft-ix-net-edge {
	fill: none;
	stroke: color-mix(in srgb, var(--color-ink, #263229) 25.1%, transparent);
	stroke-width: 1;
	transition:
		opacity 0.25s ease,
		stroke-width 0.25s ease;
}

.ft-ix-net-edge--contains,
.ft-ix-net-edge--member {
	stroke-dasharray: 3 3;
}

.ft-ix-net-edge--avoid {
	stroke: var(--ft-ix-avoid);
	stroke-width: 2;
}

.ft-ix-net-edge--caution {
	stroke: var(--ft-ix-caution);
	stroke-width: 1.6;
}

.ft-ix-net-edge--monitor {
	stroke: var(--ft-ix-monitor);
	stroke-width: 1.2;
}

.ft-ix-net-node {
	cursor: pointer;
	outline: none;
	transition: opacity 0.25s ease;
}

.ft-ix-net-node rect {
	fill: var(--color-cream, #f3efe5);
	stroke: var(--color-ink, #263229);
	stroke-width: 1;
}

.ft-ix-net-node text {
	fill: var(--color-ink, #263229);
	font-size: 12px;
	pointer-events: none;
}

.ft-ix-net-node--formula rect {
	fill: var(--color-ink, #263229);
}

.ft-ix-net-node--formula text {
	fill: var(--color-cream, #f3efe5);
}

.ft-ix-net-node--group rect {
	stroke-dasharray: 3 2;
}

.ft-ix-net-node.is-toxic rect {
	stroke: var(--ft-ix-avoid);
	stroke-width: 1.75;
}

/* A name in the check. */
.ft-ix-net-node.is-chosen rect {
	stroke: var(--color-wine, #713e3d);
	stroke-width: 2.5;
}

.ft-ix-net-node:hover rect,
.ft-ix-net-node:focus-visible rect {
	stroke: var(--color-wine, #713e3d);
	stroke-width: 2;
}

.ft-ix-net-svg.is-dimmed .ft-ix-net-node:not(.is-on) {
	opacity: 0.18;
}

.ft-ix-net-svg.is-dimmed .ft-ix-net-edge:not(.is-on) {
	opacity: 0.06;
}

.ft-ix-net-svg.is-dimmed .ft-ix-net-edge.is-on {
	stroke-width: 2.5;
}

/* Redrawn with only part of the network: names glide to their new rows, those left out fade, and the lines wait
   until the names have arrived. */
.ft-ix-net-svg.is-moving .ft-ix-net-node {
	transition:
		transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease;
}

.ft-ix-net-svg.is-moving .ft-ix-net-edge {
	opacity: 0;
	transition: none;
}

.ft-ix-net-svg.ft-ix-net-svg .ft-ix-net-node.is-away,
.ft-ix-net-svg.ft-ix-net-svg .ft-ix-net-edge.is-away {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ft-ix-net-svg.is-moving .ft-ix-net-node {
		transition: opacity 0.2s ease;
	}
}

.ft-ix-net-caption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	margin-bottom: 1rem;
	color: var(--ft-ix-soft);
}

.ft-ix-net-caption p {
	margin: 0;
}

.ft-ix-net-caption strong {
	color: var(--color-ink, #263229);
}

.ft-ix-net-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.ft-ix-net-actions .ft-ix-check {
	margin: 0;
}

.ft-ix-net-clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-wine, #713e3d);
	font: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
}

/* A name that adds itself to the check. */
.ft-ix-name {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline dotted
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ft-ix-name:hover,
.ft-ix-name:focus-visible {
	color: var(--color-wine, #713e3d);
	text-decoration-color: currentcolor;
}

/* How a finding connects, folded inside its card. */
.ft-ix-how {
	margin-top: 0.6rem;
}

.ft-ix-how > summary {
	display: inline-block;
	color: var(--color-wine, #713e3d);
	font:
		600 0.6rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.ft-ix-how > summary::-webkit-details-marker {
	display: none;
}

.ft-ix-how > summary::after {
	content: " +";
}

.ft-ix-how[open] > summary::after {
	content: " −";
}

.ft-ix-how .ft-ix-paths.ft-ix-paths {
	margin: 0.75rem 0 0;
}

/* The full list's line saying what it is narrowed to. */
.ft-ix-list-note {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: baseline;
	margin: 0 0 1rem;
}

.ft-ix-list-note p {
	margin: 0;
	font-size: 0.95rem;
}

/* The dictionary. */
.ft-ix-group-title.ft-ix-group-title {
	margin: 2.5rem 0 1rem;
	font:
		600 0.64rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ft-ix-entries {
	border-top: 1px solid var(--ft-ix-rule);
}

.ft-ix-entry[hidden] {
	display: none;
}

/* Page buttons under each part of the full list (added by the checker's script). */
.ft-ix-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin: 1.25rem 0 0;
}

.ft-ix-pager-count.ft-ix-pager-count {
	margin: 0;
	color: var(--ft-ix-soft);
	font-size: 0.85rem;
}

.ft-ix-pager-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.ft-ix-pager-page,
.ft-ix-pager-step {
	min-width: 2.4rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ft-ix-rule);
	border-radius: 999px;
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.ft-ix-pager-page:hover,
.ft-ix-pager-step:hover:not(:disabled) {
	border-color: var(--color-ink, #263229);
}

.ft-ix-pager-page[aria-current="page"] {
	border-color: var(--color-ink, #263229);
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-pager-step:disabled {
	opacity: 0.4;
	cursor: default;
}

.ft-ix-pager-gap {
	padding: 0 0.2rem;
	color: var(--ft-ix-soft);
}

.ft-ix-entry {
	border-bottom: 1px solid var(--ft-ix-rule);
	scroll-margin-top: 8rem;
}

.ft-ix-entry > summary {
	display: grid;
	grid-template-columns: minmax(12rem, 18rem) 1fr auto;
	gap: 0.25rem 1.25rem;
	align-items: baseline;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
}

.ft-ix-entry > summary::-webkit-details-marker {
	display: none;
}

/* Open, an entry's badges are told again inside it (its findings, its safety notes), so its row drops them. */
.ft-ix-entry[open] > summary .ft-ix-entry-badges {
	display: none;
}

.ft-ix-entry-name {
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: 1.35rem;
	font-weight: 500;
}

.ft-ix-entry-other {
	overflow: hidden;
	color: var(--ft-ix-soft);
	font-size: 0.85rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 40rem) {
	.ft-ix-entry > summary {
		grid-template-columns: 1fr auto;
	}

	.ft-ix-entry-other {
		grid-row: 2;
		grid-column: 1 / -1;
	}
}

/* On a phone the badges go under the name, so the name keeps the width. */
@media (max-width: 30rem) {
	.ft-ix-entry > summary {
		grid-template-columns: 1fr;
	}

	.ft-ix-entry-other {
		grid-row: auto;
	}

	.ft-ix-entry-badges {
		justify-content: flex-start;
	}
}

.ft-ix-entry-body {
	padding: 0 0 1.5rem;
}

.ft-ix-contains {
	margin: 0 0 1rem;
	font-size: 0.92rem;
}

.ft-ix-contains .ft-ix-contains-label {
	margin-right: 0.5rem;
	color: var(--ft-ix-soft);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-contains a {
	color: inherit;
}

@media (min-width: 40rem) {
	.ft-ix-contains {
		display: grid;
		grid-template-columns: 12rem minmax(0, 1fr);
		column-gap: 1.5rem;
		align-items: baseline;
	}
}

.ft-ix-check {
	margin-top: 1rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--color-ink, #263229);
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.3s ease,
		color 0.3s ease;
}

.ft-ix-check:hover,
.ft-ix-check:focus-visible {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

/* The Answer and the Full list share the work: an answer card ends with a link to the herb's full entry (what it
   is, what it holds, everything it interacts with); a chosen entry in the list marks its rows about the reader's
   medicines and links back to the answer. */
.ft-ix-card-foot.ft-ix-card-foot {
	margin: 1.25rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--ft-ix-rule);
	font-size: 0.88rem;
}

.ft-ix-entry-link {
	color: var(--color-wine, #713e3d);
	font-weight: 600;
}

.ft-ix-card-foot-note {
	color: var(--ft-ix-soft);
}

.ft-ix-entry.is-chosen > summary .ft-ix-entry-name {
	color: var(--color-wine, #713e3d);
}

.ft-ix-entry-check.ft-ix-entry-check {
	margin: 0 0 1rem;
	padding: 0.6rem 0.85rem;
	border-left: 3px solid var(--ft-ix-caution);
	background: #c9a96e1f;
	font-size: 0.9rem;
}

.ft-ix-to-answer {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-wine, #713e3d);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ft-ix-finding.is-in-check {
	margin-inline: -0.85rem;
	padding-inline: 0.85rem;
	border-left: 3px solid var(--ft-ix-caution);
	background: #c9a96e1f;
}

.ft-ix-via-list > li.is-in-check {
	margin: -0.35rem -0.6rem;
	padding: 0.35rem 0.6rem 0.35rem calc(0.6rem - 3px);
	border-left: 3px solid var(--ft-ix-caution);
	background: #c9a96e1f;
}

/* What the materia medica says of a herb or formula: at the top of its entry in the full list (a row per field, its
   name in the same column as the findings' badges below), and under its name on a card. */
.ft-ix-about {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: 0.6rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--ft-ix-rule);
}

.ft-ix-about-row {
	display: contents;
}

.ft-ix-about dt {
	color: var(--ft-ix-soft);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 2.2;
	text-transform: uppercase;
}

.ft-ix-about dd {
	margin: 0;
}

@media (max-width: 40rem) {
	.ft-ix-about {
		grid-template-columns: 1fr;
		row-gap: 0.1rem;
	}

	.ft-ix-about dd {
		margin-bottom: 0.5rem;
	}
}

/* Nature, taste and channels as badges; a nature is tinted warm (wine) or cool (slate). */
.ft-ix-trait {
	display: inline-block;
	margin: 0 0.3rem 0.3rem 0;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--ft-ix-rule);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ft-ix-trait--warm {
	border-color: color-mix(
		in srgb,
		var(--color-wine, #713e3d) 40%,
		transparent
	);
	background: #f6ecea;
	color: var(--color-wine, #713e3d);
}

.ft-ix-trait--cool {
	border-color: #3f5a6a66;
	background: #e6ecef;
	color: #3f5a6a;
}

.ft-ix-card-about {
	margin: -0.25rem 0 1rem;
	color: var(--ft-ix-soft);
}

/* A herb or formula nobody has reviewed yet: dashed, so it never reads as "nothing found". */
.ft-ix-badge--unchecked {
	border: 1px dashed var(--ft-ix-soft);
	color: var(--ft-ix-soft);
}

/* Pregnancy grades: outlined in gold, filled for "not for use". */
.ft-ix-preg {
	border-color: #8a6d35;
	background: transparent;
	color: #6b5226;
}

.ft-ix-preg--avoid {
	background: #8a6d35;
	color: var(--color-cream, #f3efe5);
}

.ft-ix-preg [lang="zh"] {
	letter-spacing: 0.05em;
}

.ft-ix-card--pregnancy {
	--ft-ix-level: #8a6d35;
	background: #f6f0e3;
}

.ft-ix-card--clash {
	--ft-ix-level: var(--ft-ix-caution);
}

/* "Change its herbs" on a chosen formula's chip. */
.ft-ix-chip-action {
	padding: 0 0.35rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.78rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	opacity: 0.8;
	cursor: pointer;
}

.ft-ix-chip-action:hover,
.ft-ix-chip-action:focus-visible {
	opacity: 1;
}

/* A herb's amount in a formula: beside it in a changed formula and in the full list. */
.ft-ix-chip-amount,
.ft-ix-amount {
	color: var(--ft-ix-soft);
	font-size: 0.82em;
	white-space: nowrap;
}

/* A formula whose herbs the reader changes: its herbs together under its name, with a box to add more. */
.ft-ix-formula-edit {
	flex: 1 1 100%;
	margin: 0.25rem 0 0;
	padding: 0.75rem 0.9rem 0.9rem;
	border: 1px solid var(--color-ink, #263229);
	background: var(--color-cream, #f3efe5);
}

.ft-ix-formula-edit-head.ft-ix-formula-edit-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	font-size: 0.9rem;
}

.ft-ix-formula-edit-name {
	font-weight: 600;
}

.ft-ix-formula-edit-herbs.ft-ix-formula-edit-herbs {
	margin: 0.6rem 0 0.75rem;
}

.ft-ix-formula-edit .ft-ix-input.ft-ix-input {
	padding-block: 0.55rem;
	font-size: 0.92rem;
}

/* Under the pickers: pasting a label, and the pregnancy switch. */
.ft-ix-options {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: flex-start;
	justify-content: space-between;
	margin: -0.5rem 0 2rem;
}

.ft-ix-paste {
	flex: 1 1 24rem;
	max-width: 40rem;
}

.ft-ix-paste > summary {
	color: var(--color-wine, #713e3d);
	font-size: 0.95rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ft-ix-paste-intro {
	margin: 0.75rem 0 1rem;
	color: var(--ft-ix-soft);
	font-size: 0.92rem;
}

.ft-ix-paste-box {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ft-ix-rule);
	background: var(--color-cream, #f3efe5);
	color: var(--color-ink, #263229);
	font: inherit;
	resize: vertical;
}

.ft-ix-paste-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	margin-top: 0.75rem;
}

.ft-ix-paste-add,
.ft-ix-print-button {
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--color-ink, #263229);
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background 0.3s ease,
		color 0.3s ease;
}

.ft-ix-paste-add:hover,
.ft-ix-paste-add:focus-visible,
.ft-ix-print-button:hover,
.ft-ix-print-button:focus-visible {
	background: var(--color-ink, #263229);
	color: var(--color-cream, #f3efe5);
}

.ft-ix-paste-result {
	flex: 1 1 14rem;
	margin: 0;
	color: var(--ft-ix-soft);
	font-size: 0.9rem;
}

.ft-ix-pregnant {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	font-size: 0.95rem;
	cursor: pointer;
}

.ft-ix-pregnant-box {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: #8a6d35;
}

/* After the answer: who to ask, printing and booking. */
.ft-ix-next {
	grid-column: 1 / -1;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ft-ix-rule);
}

.ft-ix-next-text {
	max-width: 44rem;
	margin: 0 0 1rem;
	color: var(--ft-ix-soft);
}

.ft-ix-next-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.ft-ix-book-button.ft-ix-book-button {
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--color-wine, #713e3d);
	background: var(--color-wine, #713e3d);
	color: var(--color-cream, #f3efe5);
	font:
		600 0.62rem/1.4 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background 0.3s ease,
		border-color 0.3s ease;
}

.ft-ix-book-button.ft-ix-book-button:hover,
.ft-ix-book-button.ft-ix-book-button:focus-visible {
	border-color: #5a3130;
	background: #5a3130;
	color: var(--color-cream, #f3efe5);
}

.ft-ix-next-call {
	margin-left: 0.5rem;
	color: var(--ft-ix-soft);
}

.ft-ix-next-link {
	color: var(--color-wine, #713e3d);
	font-weight: 600;
	white-space: nowrap;
}

/* The printed check: a sheet of its own, shown only when printing. */
.ft-ix-print {
	display: none;
}

/* Paper cannot scroll sideways: a long path wraps there. */
.ft-ix-print .ft-ix-chain.ft-ix-chain {
	flex-wrap: wrap;
	gap: 0.6rem 0;
	overflow: visible;
}

/* The record of a name (a herb, formula, medicine, supplement, food or group), opened by clicking it anywhere in
   the checker: a panel at the right of the page, over it on phones. It sits on <body>, outside the block. */
.ft-ix-record {
	position: fixed;
	z-index: 100;
	top: var(--wp-admin--admin-bar--height, 0);
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(36rem, 100%);
	border-left: 1px solid var(--color-ink, #263229);
	background: var(--color-cream, #f3efe5);
	box-shadow: -1.5rem 0 3rem
		color-mix(in srgb, var(--color-ink, #263229) 18.04%, transparent);
	color: var(--color-ink, #263229);
	animation: ft-ix-record-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-ix-record[hidden] {
	display: none;
}

@keyframes ft-ix-record-in {
	from {
		opacity: 0;
		translate: 2rem 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-ix-record {
		animation: none;
	}
}

.ft-ix-record-bar {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0.5rem clamp(1.25rem, 3vw, 2rem);
	border-bottom: 1px solid var(--ft-ix-rule);
}

.ft-ix-record-back,
.ft-ix-record-close {
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--color-ink, #263229);
	font:
		600 0.64rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.18em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.ft-ix-record-back::before {
	content: "← ";
}

.ft-ix-record-close::after {
	content: "  ×";
	font-size: 0.9rem;
	letter-spacing: 0;
}

.ft-ix-record-back:hover,
.ft-ix-record-back:focus-visible,
.ft-ix-record-close:hover,
.ft-ix-record-close:focus-visible {
	color: var(--color-wine, #713e3d);
}

.ft-ix-record-body {
	flex: 1;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem) 3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ft-ix-record .ft-ix-eyebrow {
	margin: 0 0 0.6rem;
	color: var(--color-wine, #713e3d);
	font:
		600 0.64rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ft-ix-record-title.ft-ix-record-title {
	margin: 0 0 0.5rem;
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: var(--wp--preset--font-size--heading-card);
	font-weight: 400;
	line-height: 1.1;
}

.ft-ix-record-title:focus:not(:focus-visible) {
	outline: none;
}

.ft-ix-record-other {
	margin: 0 0 1rem;
	color: var(--ft-ix-soft);
	font-size: 0.92rem;
}

.ft-ix-record-actions {
	margin: 0 0 1.75rem;
}

.ft-ix-record-actions .ft-ix-check {
	margin-top: 0;
}

.ft-ix-record-line {
	margin: 0 0 0.6rem;
}

.ft-ix-record-label,
.ft-ix-record-heading.ft-ix-record-heading {
	color: var(--ft-ix-soft);
	font:
		600 0.62rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ft-ix-record-label {
	margin-right: 0.35rem;
}

.ft-ix-record-heading.ft-ix-record-heading {
	margin: 1.75rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ft-ix-rule);
}

.ft-ix-record .ft-ix-entry-body {
	padding: 0;
}

.ft-ix-record-full {
	margin-top: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-wine, #713e3d);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* In the panel, an entry's parts stack as they do on a phone: the page's badge column would leave the words too
   narrow. */
.ft-ix-record .ft-ix-findings:has(.ft-ix-badge) > .ft-ix-finding,
.ft-ix-record .ft-ix-safety-item,
.ft-ix-record .ft-ix-contains {
	display: block;
}

.ft-ix-record
	.ft-ix-findings:has(.ft-ix-badge)
	> .ft-ix-finding
	> .ft-ix-finding-head {
	display: flex;
}

.ft-ix-record
	.ft-ix-findings:has(.ft-ix-badge)
	.ft-ix-finding-head
	+ .ft-ix-via-part {
	margin-top: 0.65rem;
}

.ft-ix-record
	.ft-ix-findings:has(.ft-ix-badge)
	> .ft-ix-finding
	.ft-ix-chain.ft-ix-chain {
	margin-left: 0;
}

.ft-ix-record .ft-ix-safety-item > .ft-ix-badge + .ft-ix-badge {
	margin-left: 0.4rem;
}

.ft-ix-record .ft-ix-safety-item > p {
	margin-top: 0.5rem;
}

.ft-ix-record .ft-ix-about {
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 0.5rem 1rem;
}

/* Names that open a record: the server writes medicine names in the full list as text; the script makes them
   buttons by role. */
.ft-ix-rec {
	text-decoration: underline dotted
		color-mix(in srgb, var(--color-ink, #263229) 40%, transparent);
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ft-ix-rec:hover,
.ft-ix-rec:focus-visible {
	color: var(--color-wine, #713e3d);
	text-decoration-color: currentcolor;
}

details.ft-ix-finding-formulas > summary {
	cursor: pointer;
}

details.ft-ix-finding-formulas > summary:hover {
	color: var(--color-wine, #713e3d);
}

details.ft-ix-finding-formulas > p {
	margin-top: 0.3rem;
}

.ft-ix-finding-group {
	color: var(--ft-ix-soft);
	font-size: 0.92rem;
}

button.ft-ix-chip-name {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

button.ft-ix-chip-name:hover,
button.ft-ix-chip-name:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media print {
	.ft-ix-record {
		display: none;
	}
}

@media print {
	html.ft-ix-printing body > :not(.ft-ix-print) {
		display: none !important;
	}

	html.ft-ix-printing .ft-ix-print {
		display: block;
		color: #000;
		font-size: 11pt;
	}

	/* A card longer than the rest of a page continues on the next, but never splits a finding, a path's boxes or
	   a detail; its heading stays with what follows it. */
	.ft-ix-print .ft-ix-card {
		margin-bottom: 0.8rem;
		break-inside: auto;
	}

	.ft-ix-print .ft-ix-card-head {
		break-after: avoid;
	}

	.ft-ix-print .ft-ix-card-foot {
		display: none;
	}

	.ft-ix-print
		:is(
			.ft-ix-finding-head,
			.ft-ix-finding > p,
			.ft-ix-chain,
			.ft-ix-node,
			.ft-ix-details > *,
			.ft-ix-sources li,
			.ft-ix-safety-item,
			.ft-ix-print-choices
		) {
		break-inside: avoid;
	}

	.ft-ix-print .ft-ix-how > summary,
	.ft-ix-print .ft-ix-details dt {
		break-after: avoid;
	}

	/* Paper is narrow: the badge goes above a finding rather than in a column beside it, so the words keep the
	   width. */
	.ft-ix-print .ft-ix-findings:has(.ft-ix-badge) > .ft-ix-finding {
		display: block;
	}

	.ft-ix-print
		.ft-ix-findings:has(.ft-ix-badge)
		> .ft-ix-finding
		> .ft-ix-finding-head {
		display: flex;
	}

	.ft-ix-print
		.ft-ix-findings:has(.ft-ix-badge)
		> .ft-ix-finding
		.ft-ix-chain.ft-ix-chain {
		margin-left: 0;
	}

	.ft-ix-print .ft-ix-how > summary {
		display: block;
		font-weight: 600;
	}

	.ft-ix-print-head {
		margin-bottom: 1rem;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid #000;
	}

	.ft-ix-print-clinic,
	.ft-ix-print-contact,
	.ft-ix-print-date {
		margin: 0;
	}

	.ft-ix-print-clinic {
		font-weight: 600;
	}

	.ft-ix-print-title {
		margin: 0.6rem 0 0.2rem;
		font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
		font-size: 20pt;
		font-weight: 500;
	}

	.ft-ix-print-choices {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0.2rem 1rem;
		margin: 0 0 1rem;
	}

	.ft-ix-print-choices dt {
		font-weight: 600;
	}

	.ft-ix-print-choices dd {
		margin: 0;
	}

	.ft-ix-print-note {
		margin-top: 1rem;
		font-size: 9pt;
	}

	.ft-ix-print-watch {
		margin: 0 0 1rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid #000;
		break-inside: avoid;
	}

	.ft-ix-print-watch h2 {
		margin: 0 0 0.3rem;
		font-size: 11pt;
	}

	.ft-ix-print-watch ul {
		margin: 0;
		padding-left: 1.1rem;
	}
}

.ft-ix-staff-note {
	margin: 0 0 1.5rem;
	padding: 0.7rem 1rem;
	border: 1px dashed var(--ft-ix-rule);
	color: var(--ft-ix-soft);
	font-size: 0.88rem;
}

.ft-ix-visitor-view p {
	margin: 0;
}

.ft-ix-visitor-view label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.6rem;
	color: var(--color-ink, #263229);
	font-weight: 600;
	cursor: pointer;
}

.ft-ix-visitor-view label[hidden] {
	display: none;
}

.ft-ix-visitor-view input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--ft-ix-avoid);
}

.ft-ix-note {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--ft-ix-rule);
	color: var(--ft-ix-soft);
	font-size: 0.88rem;
}

/* Google reviews (the Google Reviews block, assets/reviews.js): a slim band, the rating, one review at a time and small
   controls in one row on wide screens, stacked on narrow ones. Every tone derives from the section's text color; the
   stars are wine on light sections and gold on dark ones. The reviews share one grid cell, so the stage is as tall as
   the longest. A review arrives fading in as its letters close up from wide spacing ("tracking in") and leaves fading
   out as they open again. */
.ft-reviews {
	--ft-reviews-rule: color-mix(in srgb, currentcolor 18%, transparent);
	--ft-reviews-star: var(--wp--preset--color--wine);
	display: grid;
	grid-template-areas:
		"summary"
		"stage"
		"controls";
	gap: 1.5rem;
}

.wp-block-cover:not(.is-light) .ft-reviews,
.has-ink-background-color .ft-reviews {
	--ft-reviews-star: var(--wp--preset--color--gold);
}

/* The Google reviews section is a slim band: as tall as its content, not a Cover's usual 430px. */
.ft-layout-reviews > .wp-block-cover,
.ft-layout-reviews > .wp-block-cover-image {
	min-height: 0;
}

@media (min-width: 64rem) {
	.ft-reviews {
		grid-template-areas: "summary stage controls";
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	/* A thin rule between the rating and the review. */
	.ft-reviews-stage {
		border-left: 1px solid var(--ft-reviews-rule);
		padding-left: clamp(2rem, 4vw, 4rem);
	}
}

.ft-reviews p {
	margin: 0;
}

.ft-reviews-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	grid-area: summary;
}

@media (min-width: 64rem) {
	.ft-reviews-summary {
		display: grid;
		gap: 0.6rem;
	}
}

.ft-reviews-score {
	display: flex;
	gap: 0.85rem;
	align-items: center;
}

.ft-reviews-rating {
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: clamp(2.5rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 0.9;
}

.ft-reviews-score .ft-stars {
	width: 5.5rem;
}

.ft-reviews-source,
.ft-reviews-count,
.ft-review-author {
	font:
		600 0.65rem/1.5 Manrope,
		"Manrope Fallback",
		sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.ft-reviews .ft-reviews-source {
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
}

.ft-reviews-source a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.ft-reviews-source a span {
	display: inline-block;
	transition: transform 0.3s ease;
}

.ft-reviews-source a:hover,
.ft-reviews-source a:focus-visible {
	color: var(--ft-reviews-star);
}

.ft-reviews-source a:hover span,
.ft-reviews-source a:focus-visible span {
	transform: translateX(0.25rem);
}

/* Stars: an empty row with a filled row over it, cut to the rating. */
.ft-stars {
	position: relative;
	display: inline-block;
	width: 5.5rem;
	aspect-ratio: 5;
	line-height: 0;
}

.ft-stars svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentcolor;
}

.ft-stars-empty {
	display: block;
	color: color-mix(in srgb, currentcolor 18%, transparent);
}

.ft-stars-filled {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--ft-reviews-star);
}

.ft-stars-filled svg {
	width: auto;
	height: 100%;
	aspect-ratio: 5;
}

.ft-reviews-stage {
	grid-area: stage;
}

.ft-reviews-slides {
	display: grid;
	overflow: clip;
	overflow-clip-margin: 1rem;
}

.ft-review {
	grid-area: 1 / 1;
	margin: 0;
}

.ft-review-text {
	margin: 0;
	border: 0;
	padding: 0;
}

.ft-reviews .ft-review-text p {
	max-width: 48em;
	font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-wrap: pretty;
}

/* "Read more" after the shortened review, as the site's small link labels. */
.ft-review-more {
	margin-left: 0.35rem;
	font-family: Manrope, "Manrope Fallback", sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
	text-underline-offset: 0.3em;
}

/* The review's stars, who wrote it and when, on one line. */
.ft-review-by {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	align-items: center;
	margin-top: 0.75rem;
}

.ft-review-by .ft-stars {
	width: 4.25rem;
}

.ft-review-author a {
	color: inherit;
	text-decoration: none;
}

.ft-review-author a:hover,
.ft-review-author a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ft-review-when {
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
	font-size: 0.8rem;
}

.ft-reviews-controls {
	display: flex;
	gap: 1rem;
	align-items: center;
	grid-area: controls;
}

.ft-reviews-count {
	flex: none;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, currentcolor var(--ft-quiet), transparent);
}

.ft-reviews-current {
	color: var(--ft-reviews-star);
}

.ft-reviews-track {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--ft-reviews-rule);
}

@media (min-width: 64rem) {
	.ft-reviews-track {
		flex: none;
		width: 3rem;
	}
}

.ft-reviews-progress {
	position: absolute;
	inset: 0;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
}

.ft-reviews-progress.is-running {
	animation: ft-reviews-progress var(--ft-reviews-seconds, 7s) linear forwards;
}

.ft-reviews.is-paused .ft-reviews-progress {
	animation-play-state: paused;
}

.ft-reviews-buttons {
	display: flex;
	flex: none;
	gap: 0.4rem;
}

.ft-reviews-controls button {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-radius: 50%;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.ft-reviews-controls button[hidden] {
	display: none;
}

.ft-reviews-controls button:hover,
.ft-reviews-controls button:focus-visible {
	border-color: color-mix(in srgb, currentcolor 55%, transparent);
	background: color-mix(in srgb, currentcolor 7%, transparent);
}

.ft-reviews-controls svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ft-reviews-play-icon,
.ft-reviews.is-stopped .ft-reviews-pause-icon {
	display: none;
}

.ft-reviews.is-stopped .ft-reviews-play-icon {
	display: inline;
	fill: currentcolor;
	stroke: none;
}

/* Without the script only the first review shows; with it every review is laid out, and only the current one seen. */
.ft-reviews.is-ready .ft-review {
	visibility: hidden;
	opacity: 0;
}

.ft-reviews.is-ready .ft-review.is-current,
.ft-reviews.is-ready .ft-review.is-leaving {
	visibility: visible;
	opacity: 1;
}

.ft-reviews.is-ready .ft-review.is-current .ft-review-text p {
	animation: ft-review-tracking-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s
		both;
}

.ft-reviews.is-ready .ft-review.is-current .ft-review-by {
	animation: ft-review-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.ft-reviews.is-ready .ft-review.is-leaving {
	animation: ft-review-fade-out 0.6s ease forwards;
}

.ft-reviews.is-ready .ft-review.is-leaving .ft-review-text p {
	animation: ft-review-tracking-out 0.6s cubic-bezier(0.55, 0, 0.75, 0.2)
		forwards;
}

@keyframes ft-review-tracking-in {
	from {
		opacity: 0;
		letter-spacing: 0.16em;
		filter: blur(6px);
	}

	40% {
		opacity: 0.6;
	}

	to {
		opacity: 1;
		letter-spacing: 0;
		filter: blur(0);
	}
}

@keyframes ft-review-tracking-out {
	to {
		opacity: 0;
		letter-spacing: 0.08em;
		filter: blur(4px);
	}
}

@keyframes ft-review-rise {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ft-review-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes ft-reviews-progress {
	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-reviews.is-ready .ft-review.is-current .ft-review-text p,
	.ft-reviews.is-ready .ft-review.is-current .ft-review-by,
	.ft-reviews.is-ready .ft-review.is-leaving,
	.ft-reviews.is-ready .ft-review.is-leaving .ft-review-text p {
		animation: none;
	}

	.ft-reviews.is-ready .ft-review.is-leaving {
		visibility: hidden;
	}

	.ft-reviews-track {
		visibility: hidden;
	}
}

.editor-styles-wrapper .wp-block.mx-auto{margin-inline:auto}.editor-styles-wrapper .wp-block.mt-4{margin-top:calc(var(--spacing) * 4)}.editor-styles-wrapper .wp-block.mt-5{margin-top:calc(var(--spacing) * 5)}.editor-styles-wrapper .wp-block.mt-6{margin-top:calc(var(--spacing) * 6)}.editor-styles-wrapper .wp-block.mt-7{margin-top:calc(var(--spacing) * 7)}.editor-styles-wrapper .wp-block.mt-8{margin-top:calc(var(--spacing) * 8)}.editor-styles-wrapper .wp-block.mt-9{margin-top:calc(var(--spacing) * 9)}.editor-styles-wrapper .wp-block.mt-10{margin-top:calc(var(--spacing) * 10)}.editor-styles-wrapper .wp-block.mt-14{margin-top:calc(var(--spacing) * 14)}.editor-styles-wrapper .wp-block.mb-5{margin-bottom:calc(var(--spacing) * 5)}.editor-styles-wrapper .wp-block.mb-8{margin-bottom:calc(var(--spacing) * 8)}.editor-styles-wrapper .wp-block.mb-14{margin-bottom:calc(var(--spacing) * 14)}.editor-styles-wrapper .wp-block.mb-16{margin-bottom:calc(var(--spacing) * 16)}body .space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}body .space-y-7>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)))}@media (width>=64rem){.editor-styles-wrapper .wp-block.lg\:mb-3{margin-bottom:calc(var(--spacing) * 3)}}@media (width>=64rem){.editor-styles-wrapper .wp-block.lg\:ml-auto{margin-left:auto}}