/* motif.css · Unsubscribe website (current look) · made in Build It! Motif. Link it after your own stylesheet.
   Canonical tokens are --m-*; the alias block maps them to website names. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,400;125,900&family=Instrument+Sans:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;600&display=swap");
:root{--m-display:"Archivo","Arial Black",sans-serif;--m-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--m-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--m-unit:8px;--m-radius:4px;--m-rule:1px;--m-gap:16px;--m-bg:#F3F1EC;--m-panel:#FBFAF7;--m-ink:#141414;--m-mute:#5F5D57;--m-line:#D4D0C6;--m-hair:#D4D0C6;--m-accent:#B93A10;--m-accent-ink:#FFFFFF;--m-focal:#E8501F;--m-focal-ink:#FFFFFF;--m-good:#2C7A4B;--m-warn:#B87A0C;--m-bad:#D1341A;--m-strike:#111111;--m-bubble:#E7E4DC;--m-on-focal:var(--m-focal-ink);--brand:var(--m-focal);--me:var(--m-focal);--bubble:var(--m-bubble);--brand-deep:var(--m-accent);--on-brand:var(--m-focal-ink);--paper:var(--m-bg);--sheet:var(--m-panel);--ink:var(--m-ink);--muted:var(--m-mute);--rule:var(--m-line);--good:var(--m-good);--warn:var(--m-warn);--bad:var(--m-bad);--wide:var(--m-display);--body:var(--m-body);--mono:var(--m-mono)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--m-bg:#111111;--m-panel:#1B1B1A;--m-ink:#F1EFE9;--m-mute:#A3A097;--m-line:#34332F;--m-hair:#34332F;--m-accent:#FF7444;--m-accent-ink:#111111;--m-focal:#E8501F;--m-focal-ink:#FFFFFF;--m-good:#5FC488;--m-warn:#E7B04A;--m-bad:#F06A5E;--m-strike:#111111;--m-bubble:#2A2926;color-scheme:dark}}
:root[data-theme="dark"]{--m-bg:#111111;--m-panel:#1B1B1A;--m-ink:#F1EFE9;--m-mute:#A3A097;--m-line:#34332F;--m-hair:#34332F;--m-accent:#FF7444;--m-accent-ink:#111111;--m-focal:#E8501F;--m-focal-ink:#FFFFFF;--m-good:#5FC488;--m-warn:#E7B04A;--m-bad:#F06A5E;--m-strike:#111111;--m-bubble:#2A2926;color-scheme:dark}
:root[data-theme="light"]{--m-bg:#F3F1EC;--m-panel:#FBFAF7;--m-ink:#141414;--m-mute:#5F5D57;--m-line:#D4D0C6;--m-hair:#D4D0C6;--m-accent:#B93A10;--m-accent-ink:#FFFFFF;--m-focal:#E8501F;--m-focal-ink:#FFFFFF;--m-good:#2C7A4B;--m-warn:#B87A0C;--m-bad:#D1341A;--m-strike:#111111;--m-bubble:#E7E4DC;color-scheme:light}
/* Struck-through wordmark */
.m-strike{font-family:var(--m-display);font-weight:900;background:var(--m-focal);color:var(--m-focal-ink);padding:.15em .4em .2em;display:inline-block;position:relative;line-height:1}.m-strike::after{content:"";position:absolute;left:.3em;right:.3em;top:56%;height:.06em;background:var(--m-strike)}
/* Giant masthead */
.m-masthead{font-family:var(--m-display);font-weight:900;font-size:clamp(40px,8vw,120px);line-height:.85;letter-spacing:-.045em;text-transform:uppercase;margin:0}.m-masthead b{color:var(--m-focal)}
/* Hairline rules */
.m-rule{border:0;border-top:var(--m-rule) solid var(--m-line);margin:calc(var(--m-unit)*2) 0}
/* Dashed sample tag */
.m-tag{font-family:var(--m-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px dashed var(--m-mute);color:var(--m-mute);padding:2px 7px;border-radius:calc(var(--m-radius)/2)}
/* Grid paper */
.m-grid{background-image:linear-gradient(color-mix(in srgb,var(--m-ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--m-ink) 7%,transparent) 1px,transparent 1px);background-size:calc(var(--m-unit)*3) calc(var(--m-unit)*3)}
/* Hatched fill */
.m-hatch{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--m-ink) 10%,transparent) 0 8px,transparent 8px 16px)}
/* Bold left bar */
.m-callout{border-left:4px solid var(--m-focal);padding:8px 12px;background:color-mix(in srgb,var(--m-focal) 7%,transparent);border-radius:0 var(--m-radius) var(--m-radius) 0}
/* Mono numbers */
.m-num{font-family:var(--m-mono);font-variant-numeric:tabular-nums}
/* Outline chips */
.m-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid currentColor}.m-chip.good{color:var(--m-good)}.m-chip.warn{color:var(--m-warn)}.m-chip.bad{color:var(--m-bad)}
/* Ink buttons */
.m-btn{display:inline-flex;align-items:center;gap:6px;padding:calc(var(--m-unit)) calc(var(--m-unit)*1.75);border:var(--m-rule) solid var(--m-ink);border-radius:var(--m-radius);font-weight:600;background:none;color:var(--m-ink);cursor:pointer}.m-btn.hot{background:var(--m-focal);border-color:var(--m-focal);color:var(--m-focal-ink)}
