@import url('colors_and_type.css');

/* ============================================================
   system-mischer · styles.css — the ONE file consumers link.
   Imports the token layer, then adds base + component classes.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink-2);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{color:var(--ink);text-decoration:none;cursor:pointer;transition:color .12s ease}
a:hover{color:var(--brand-orange)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-teal-soft)}

.sm-container{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Buttons ---------- */
.sm-btn{font-family:var(--font-body);font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--r-pill);border:none;white-space:nowrap;flex:0 0 auto;transition:background .12s ease,color .12s ease,border-color .12s ease,transform .08s ease}
.sm-btn:active{transform:translateY(1px)}
.sm-btn--sm{padding:9px 16px;font-size:13px}
.sm-btn--primary{background:var(--brand-teal);color:#fff}
.sm-btn--primary:hover{background:var(--brand-teal-deep)}
.sm-btn--dark{background:var(--ink);color:#fff}
.sm-btn--dark:hover{background:var(--ink-2)}
.sm-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.sm-btn--ghost:hover{color:var(--brand-orange);border-color:var(--brand-orange)}
.sm-link-ghost{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink)}
.sm-link-ghost:hover{color:var(--brand-orange)}

/* ---------- Header ---------- */
.sm-header{position:sticky;top:0;z-index:10;background:rgba(251,248,244,.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rule)}
.sm-header__inner{max-width:var(--content-max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:24px}
.sm-brand{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0}
.sm-brand__logo{height:26px;width:auto;display:block}
.sm-nav{display:flex;gap:22px;margin-left:12px}
.sm-nav__link{font-size:14px;color:var(--ink-2)}
.sm-nav__link.is-active{color:var(--brand-orange);font-weight:700}
.sm-header .sm-btn{margin-left:auto}

/* ---------- Hero ---------- */
.sm-hero{padding:var(--s-9) 0 var(--s-8)}
.sm-hero__inner{display:flex;gap:28px;align-items:flex-start}
.sm-hero__text{flex:1;max-width:760px}
.sm-hero__ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* ---------- Article card ---------- */
.sm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sm-article{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;box-shadow:var(--shadow-1);transition:transform .12s ease,box-shadow .12s ease}
.sm-article:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sm-article__illus{aspect-ratio:4/3}
.sm-article__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.sm-article__title{font-family:var(--font-display);font-weight:900;font-size:20px;line-height:1.2;letter-spacing:-.005em;color:var(--ink);margin:0;text-wrap:balance}
.sm-article__meta{font-size:12px;color:var(--ink-4);margin-top:4px}

/* ---------- Quote on sage ---------- */
.sm-quote{background:var(--brand-sage);border-radius:var(--r-xl);padding:56px 48px;max-width:920px;margin:0 auto}
.sm-quote__rule{width:36px;height:4px;background:var(--brand-orange);border-radius:2px;margin-bottom:20px}
.sm-quote__text{font-family:var(--font-display);font-weight:900;font-size:32px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:balance;max-width:720px}
.sm-quote__attr{font-family:var(--font-body);font-size:14px;color:var(--ink-3);margin-top:18px}

/* ---------- Contact strip (dark section) ---------- */
.sm-contact-strip{background:var(--ink);color:var(--paper);padding:72px 0}
.sm-contact-strip__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.sm-contact-strip__title{font-family:var(--font-display);font-weight:900;font-size:34px;line-height:1.15;letter-spacing:-.005em;color:var(--paper);margin:8px 0 0;text-wrap:balance;max-width:560px}
.sm-contact-strip__meta{display:flex;flex-direction:column;gap:10px}
.sm-contact-strip__row{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.85)}
.sm-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Footer ---------- */
.sm-footer{background:var(--paper);padding:var(--s-8) 0 28px}
.sm-footer__inner{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-8)}
.sm-footer__brand{display:flex;align-items:center;gap:10px}
.sm-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sm-footer__head{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink);margin-bottom:10px}
.sm-footer__links{display:flex;flex-direction:column;gap:6px}
.sm-footer__links a{font-size:14px;color:var(--ink-3)}
.sm-footer__rule{height:1px;background:var(--rule);margin:var(--s-7) 0 var(--s-4)}
.sm-footer__bottom{color:var(--ink-4)}

/* ---------- Forms ---------- */
.sm-form{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-6)}
.sm-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.sm-field{display:flex;flex-direction:column;gap:6px}
.sm-field__label{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink)}
.sm-field input,.sm-field textarea,.sm-field select{font-family:var(--font-body);font-size:15px;padding:12px 14px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}
.sm-field input:focus,.sm-field textarea:focus,.sm-field select:focus{outline:none;border-color:var(--brand-teal);box-shadow:0 0 0 3px var(--teal-200)}

/* ---------- Logo block ---------- */
.sm-block{width:56px;height:56px;background:var(--brand-orange);border-radius:var(--r-sm);display:inline-block}
.sm-block--big{width:72px;height:72px}