/* Topiary tokens and fonts from the published Webflow site, inspected 2026-10-08. */
@font-face { font-family:Suisseintl; src:url('assets/topiary/suisse-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Suisseintl; src:url('assets/topiary/suisse-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('assets/topiary/ibm-plex-mono.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
:root {
  color-scheme:light;
  --smoke--200:#f0f3f5; --smoke--100--100:#f4f6f7;
  --black--100:#1b1b1b; --black--80:#000c; --black--70:#000000b3; --black--60:#0009; --black--20:#0003; --black--10:#0000001a;
  --highlight--100:#d6feb4; --blue--100:#578cfb;
  --body-sans:Suisseintl,Arial,sans-serif; --body-mono:'IBM Plex Mono',monospace;
  --headline:'Times New Roman',Times,Baskerville,Georgia,serif;
  --case-study-text-max-width:35rem;
  --paper:var(--smoke--200); --ink:var(--black--80); --muted:var(--black--60); --panel:#e6e9eb; --line:var(--black--20); --focus:var(--black--100);
}
* { box-sizing:border-box; }
html { scroll-padding-block-start:6rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 .9375rem/1.4666666667 var(--body-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { background:var(--highlight--100); }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
::selection { background:var(--highlight--100); color:var(--black--100); }
[hidden] { display:none !important; }
.skip { position:fixed; inset-block-start:.5rem; inset-inline-start:1rem; padding:.7rem 1rem; background:var(--paper); transform:translateY(-160%); z-index:300; }
.skip:focus { transform:none; }
main { width:min(calc(100% - 3rem),var(--case-study-text-max-width)); margin-inline:auto; padding-block-start:10rem; }
.page-metadata { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between; margin-block-end:1.75rem; }
.eyebrow,.status { font:400 .7rem/1.5 var(--body-mono); letter-spacing:.025rem; color:var(--muted); text-transform:uppercase; }
.eyebrow { margin:0 0 1rem; }
.page-metadata .eyebrow { margin:0; }
h1 { font:400 4rem/1.05 var(--headline); color:var(--black--80); letter-spacing:-.1rem; max-width:20ch; margin:0 0 2rem; text-wrap:balance; }
h2 { font:400 2rem/1.15 var(--headline); color:var(--black--80); letter-spacing:-.045rem; margin:0 0 1.25rem; text-wrap:balance; }
h3 { font:500 1.0625rem/1.4 var(--body-sans); margin:0 0 .75rem; }
p { margin:0 0 1.5rem; }
.prose { max-width:var(--case-study-text-max-width); }
.practice-notes a { color:var(--blue--100); text-decoration:none; }
.practice-notes a:hover { background-color:var(--highlight--100); }
.prose > h2 { margin-block-start:3.5rem; }
.section > h2 { margin-block-start:0; }
.lead { font-size:.9375rem; line-height:1.4666666667; color:var(--black--60); margin-block-end:2.5rem; }
.section { margin-block-start:4.5rem; }
.intro-note,.source-note { color:var(--muted); font-size:.875rem; line-height:1.55; }
.source-note { margin-block-start:1.25rem; }
figure { margin:1.25rem 0 0; }
img { display:block; max-width:100%; height:auto; }
figcaption { color:var(--muted); font-size:.875rem; margin-block-start:.75rem; }
.recording { background:var(--panel); border-radius:4px; padding:1.5rem; margin-block-start:1.5rem; }
.recording p:last-child { margin:0; }
.site-footer { width:calc(100% - 3rem); margin:6rem auto 0; padding-block:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.75rem 2rem; color:var(--muted); font-size:.875rem; }
.site-footer p { margin:0; }
.footer-links { display:flex; gap:1rem; align-items:center; font:400 .7rem/1 var(--body-mono); letter-spacing:.025rem; text-transform:uppercase; }
.footer-links a,.tacl-nav-meta a { position:relative; display:inline-flex; align-items:center; padding:0; line-height:1; text-decoration:none; }
.footer-links a::after,.tacl-nav-meta a::after { content:''; position:absolute; inset-block-start:50%; inset-inline-start:50%; transform:translate(-50%,-50%); width:100%; min-width:24px; height:24px; }
/* The original floating Topiary menu, with native disclosure controls. */
.tacl-nav { position:fixed; z-index:200; inset-block-start:24px; inset-inline-start:24px; width:200px; margin:0; }
.tacl-nav.is-open { width:240px; }
.tacl-nav-card { position:relative; height:var(--nav-bar-height,43px); border-radius:4px; overflow:hidden; color:var(--black--100); background:rgba(216,216,216,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tacl-nav.is-open .tacl-nav-card { height:var(--nav-open-height,204px); }
.tacl-nav-bar { appearance:none; border:0; width:100%; min-height:43px; padding:0 12px; display:flex; justify-content:space-between; align-items:center; font:400 .875rem/1 var(--body-sans); background:transparent; color:inherit; cursor:pointer; text-align:start; }
.tacl-nav-mark { display:flex; align-items:center; gap:6px; padding:0; color:var(--black--100); line-height:1; }
.tacl-nav-mark:hover { background:var(--highlight--100); }
.tacl-nav-symbol { width:28px; height:15px; object-fit:contain; }
.tacl-nav-wordmark { color:var(--black--70); font:400 15px/1 system-ui,sans-serif; }
.tacl-nav-dots { width:18px; display:flex; justify-content:space-between; align-items:center; }
.tacl-nav-dot { width:3px; height:3px; background:var(--black--60); border-radius:50%; }
.tacl-nav-menu { position:relative; padding:8px 12px 0 22px; margin:0; }
.tacl-nav-menu a,.tacl-nav-meta { opacity:0; transform:translateY(4px); pointer-events:none; }
.tacl-nav.is-open .tacl-nav-menu a,.tacl-nav.is-open .tacl-nav-meta { opacity:1; transform:none; pointer-events:auto; }
.tacl-nav-link { position:relative; display:block; padding-block:2px; font:400 20px/1.4 system-ui,sans-serif; color:var(--black--80); text-decoration:none; }
.tacl-nav-indicator { position:absolute; inset-inline-start:8px; inset-block-start:0; width:6px; height:6px; border-radius:50%; background:var(--black--100); opacity:0; pointer-events:none; }
.tacl-nav.is-open .tacl-nav-indicator.is-on { opacity:1; }
.tacl-nav-link:hover,.tacl-nav-link:focus-visible { background:transparent; }
.tacl-nav.is-open .tacl-nav-link:hover { filter:opacity(.4); padding-inline-start:6px; }
.tacl-nav-meta { display:flex; align-items:center; gap:16px; padding:32px 12px 8px; min-height:57px; color:var(--black--60); font:400 .7rem/1 var(--body-mono); letter-spacing:.025rem; text-transform:uppercase; }
.tacl-nav-meta p { margin:0; }
.tacl-nav :focus-visible { outline-offset:-2px; }
/* Topiary chrome; Fuser artwork retains its own fonts, colors, and geometry. */
.file-window { --file-text:#343434; --file-muted:#62666a; --file-heading:#1b1b1b; --file-line:#d9dddf; --file-surface:#f4f6f7; --file-active:#e6e9eb; font-family:var(--body-mono); }
@media (min-width:62rem) and (max-width:73rem) { main { padding-block-start:17rem; } }
@media (max-width:61.999rem) {
  .tacl-nav,.tacl-nav.is-open { width:calc(100% - 32px); inset-block-start:16px; inset-inline-start:16px; }
  .tacl-nav { --nav-bar-height:44px; }
  .tacl-nav-bar { min-height:44px; }
  .tacl-nav-link { min-height:44px; display:flex; align-items:center; }
  .tacl-nav-meta { padding-block:8px; gap:24px; }
  .tacl-nav-meta a::after { min-width:44px; height:44px; }
  main { padding-block-start:7.5rem; }
  .site-footer { margin-block-start:4rem; }
}
@media (max-width:36rem) {
  main { width:calc(100% - 2rem); }
  h1 { font-size:3rem; line-height:1.1; letter-spacing:-.07rem; }
  h2 { font-size:1.75rem; }
  .section { margin-block-start:3.5rem; }
  .site-footer { width:calc(100% - 2rem); }
  .footer-links { gap:24px; }
  .footer-links a::after { min-width:44px; height:44px; }
}
@media (prefers-reduced-motion:no-preference) {
  .tacl-nav { transition:width .7s cubic-bezier(.4,0,.2,1); }
  .tacl-nav-card { transition:height .7s cubic-bezier(.4,0,.2,1); }
  .tacl-nav-menu a,.tacl-nav-meta { transition:opacity .5s ease,transform .5s ease; }
  .tacl-nav.is-open .tacl-nav-menu a,.tacl-nav.is-open .tacl-nav-meta { transition-delay:.15s; }
  .tacl-nav.is-open .tacl-nav-link { transition:opacity .5s ease .15s,transform .5s ease .15s,filter .12s ease,padding-inline-start .12s ease; }
  .tacl-nav-indicator { transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s ease; }
}
@media (forced-colors:active) {
  :focus-visible { outline-color:Highlight; }
  .tacl-nav-card { border:1px solid CanvasText; background:Canvas; }
  .tacl-nav-dot { background:ButtonText; }
}

.brand-artifacts { width:min(76rem,calc(100vw - 3rem)); margin:3rem 0 3rem 50%; transform:translateX(-50%); }
.brand-artifacts img { display:block; width:100%; height:auto; border-radius:18px; box-shadow:none; }
.brand-artifacts figcaption { margin-block-start:.75rem; color:var(--muted); font:.8125rem/1.5 var(--body-sans); text-align:center; }
@media(max-width:44rem) { .brand-artifacts { width:calc(100vw - 2rem); } .brand-artifacts img { border-radius:12px; } }

.article-hero { position:relative; width:100%; margin-block:0 2rem; }
.article-hero video,.article-hero img { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:18px; box-shadow:none; }
.hero-toggle { position:absolute; inset-block-end:12px; inset-inline-end:12px; width:24px; height:24px; padding:0; display:grid; place-items:center; border:1px solid #000; border-radius:999px; background:transparent; color:#000; cursor:pointer; touch-action:manipulation; }
.hero-toggle[hidden] { display:none; }
.hero-toggle::after { content:""; position:absolute; width:40px; height:40px; inset:50% auto auto 50%; transform:translate(-50%,-50%); }
.hero-toggle svg { display:block; pointer-events:none; }

.hero-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px var(--black--100); }
.kit-annotation { margin: .75rem auto 0; color:var(--muted); font:.8125rem/1.5 var(--body-sans); text-align:center; }
@media(max-width:44rem) { .article-hero video,.article-hero img { border-radius:12px; } .hero-toggle::after { width:44px; height:44px; } }
@media(forced-colors:active) { .hero-toggle { border-color:ButtonText; background:transparent; color:ButtonText; } .hero-toggle:focus-visible { outline-color:Highlight; } }

/* Additional breathing room for article paragraphs beside media; captions stay attached. */
.practice-notes p.prose:has(+ .brand-artifacts),
.practice-notes p.prose:has(+ .file-window) { padding-block-end:32px; }
.practice-notes .brand-artifacts + p.prose { padding-block-start:32px; }