:root{
  --sal-canvas:#EDEEE9;
  --sal-surface:#E4DCC9;
  --sal-ink:#16213B;
  --sal-ink-soft:#5B6478;
  --sal-accent:#C8863A;
  --sal-canvas-deep:#0F1524;
  --sal-display:"Fraunces", Georgia, serif;
  --sal-sans:"IBM Plex Sans", system-ui, sans-serif;
  --sal-mono:"IBM Plex Mono", ui-monospace, monospace;
}
.sal-brand{display:inline-flex;align-items:center;gap:10px;color:var(--sal-ink);font-family:var(--sal-display);font-size:20px;font-weight:600;letter-spacing:-.018em;line-height:1;text-decoration:none}
.sal-brand:hover{color:var(--sal-ink)}
.sal-brand-mark{display:block;width:34px;height:34px;flex:none}
.sal-brand-wordmark{white-space:nowrap}
.sal-brand-wordmark em{font-style:normal;color:var(--sal-accent)}
.sal-brand--inverse{color:var(--sal-canvas)}
.sal-brand--inverse:hover{color:var(--sal-canvas)}
.sal-brand--inverse .sal-brand-mark{filter:brightness(0) invert(1)}
:where(.sal-brand ~ form input:not([type="checkbox"]):not([type="radio"]),.sal-brand ~ form select,.sal-brand ~ form textarea,.calc-field input){background:#fffaf2;border-color:rgba(169,109,39,.58);box-shadow:inset 3px 0 0 rgba(200,134,58,.30),0 1px 0 rgba(22,33,59,.05)}
:where(.sal-brand ~ form input:not([type="checkbox"]):not([type="radio"]),.sal-brand ~ form select,.sal-brand ~ form textarea,.calc-field input):focus{border-color:var(--sal-accent);background:#fffdf9;box-shadow:0 0 0 4px rgba(200,134,58,.16),inset 3px 0 0 var(--sal-accent)}
@media(max-width:480px){.sal-brand{font-size:18px}.sal-brand-mark{width:30px;height:30px}}