/* Ticket 1207: the one Sprowtz logo: the wordmark with Sprout as the "o", smashed pose (plans/logo-animation-1028.md).
   Used everywhere CSS runs (menu, sales site header). Emails and places without CSS use the stills in assets/brand/ cut from
   the same drawing (tools/brand/export_logo.py). Brand-locked colors: company mascot colors never recolor it.
   Font: Arial Black for now (plan default), with the bundled Archivo Black (OFL) where Arial Black is not installed. */
@font-face { font-family: "Spz Wordmark"; src: url("spz-wordmark.woff") format("woff"); font-weight: 900; font-display: block; }
.spz-logo { --s: 26px; position: relative; display: inline-flex; align-items: flex-end; flex: none;
  padding: calc(var(--s) * .22) calc(var(--s) * .3) calc(var(--s) * .12) calc(var(--s) * .2);
  font: 900 var(--s)/1 "Arial Black", "Spz Wordmark", "Archivo Black", Arial, sans-serif; letter-spacing: -.02em; color: var(--white); white-space: nowrap; }
html[data-theme=light] .spz-logo, .spz-logo.spz-on-light { color: var(--print-ink); }
html[data-theme=light] .spz-logo.spz-on-dark { color: var(--white); }
.spz-logo .l { color: inherit; --sx: 0; --sy: 0; --d: 0deg; display: inline-block; transform: translate(calc(var(--sx) * var(--s) / 100), calc(var(--sy) * var(--s) / 100)) rotate(var(--d)); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.spz-logo.fade .l:not(.o) { opacity: 0; }
.spz-logo .o { width: calc(var(--s) * 1.05); height: calc(var(--s) * 1.05); margin: 0 -.06em calc(var(--s) * -.08); position: relative; }
.spz-logo .o img { position: absolute; inset: -45%; width: 190%; height: 190%; max-width: none; transition: transform .2s; }
.spz-logo .l-z { transform-origin: 6% 22%; }
.spz-logo[data-pose=smashed] .l-S { --sx: -26; --sy: -10; --d: -14deg; }
.spz-logo[data-pose=smashed] .l-p { --sx: -16; --sy: -4; --d: -9deg; }
.spz-logo[data-pose=smashed] .l-r { --sx: -8; --sy: -6; --d: -5deg; }
.spz-logo[data-pose=smashed] .l-w { --sx: 8; --sy: -6; --d: 7deg; }
.spz-logo[data-pose=smashed] .l-t { --sx: 16; --sy: -3; --d: 8deg; }
.spz-logo[data-pose=smashed] .l-z { --sx: 40; --sy: 4; --d: 36deg; }
.spz-logo[data-pose=smashed] .o img { transform: scale(1.06, .94); }
@media (prefers-reduced-motion: reduce) { .spz-logo .l, .spz-logo .o img { transition: none; } }
html.tt-calm .spz-logo .l, .spz-logo.ttm-still .l { transition: none; }
/* Menu (26 px letter cap, about 42 px tall), company name 12 px under it, centered */
.brand.brand-stack.brand-spz { align-items: center; text-align: center; gap: 2px; }
.brand-spz .brand-name { font-size: var(--fs-note); max-width: 100%; }
/* Sales site header */
.brand .spz-logo { color: var(--white); }
.ps-brand .spz-logo { --s: 24px; color: var(--white); vertical-align: middle; }
/* Menu header (Travis Oct 28 2026 10:15 PM): pencil (Edit Menu) small top left, pin small top right, both out of the logo spot */
.side:has(.brand-spz) > .side-tools { position: absolute; top: 4px; left: 6px; right: 6px; z-index: 2; display: flex; justify-content: space-between; padding: 0; margin: 0; pointer-events: none; }
.side:has(.brand-spz) > .side-tools > .tile { --tile: 26px; width: 26px; height: 26px; min-width: 26px; padding: 0; margin: 0; pointer-events: auto; }
.side:has(.brand-spz) > .side-tools > .tile .ico { width: 15px; height: 15px; }
.side:has(.brand-spz) > .side-tools > .ne-pen:only-child { margin-right: auto; }
.side:has(.brand-spz) > .side-tools + .brand-row { margin-top: 0 !important; }
.side:has(.brand-spz) .brand-row .brand.brand-spz { padding: 30px 12px 10px; width: 100%; }
@media (max-width: 800px) { .side:has(.brand-spz) .brand-row .brand.brand-spz { padding-top: 14px; padding-right: 48px; } }

.spz-logo.spz-s26{--s:26px}
.spz-logo.spz-s24{--s:24px}
/* Sign-in page heading on sprowtz.com (Ticket 1207) */
.login h1 .spz-logo.spz-login { --s: 38px; }