/* =====================================================================
   SHANTÉ MICAH · BRAND TOKENS AND SHARED COMPONENTS
   brand.css · v1.1 · 15 Oct 2026
   The single source for every page on shantemicah.com. Change a value
   here and every page follows. Read alongside /brand/BRAND.md.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600;700&display=swap");

:root{
  /* ---------- Color: core ---------- */
  --sm-ink:        #171015;  /* body text, headings on light */
  --sm-ink-2:      #4B3D45;  /* secondary text */
  --sm-muted:      #8A7A82;  /* captions, meta, placeholder */
  --sm-line:       #E4DBE0;  /* hairlines, card borders, header rule */
  --sm-ground:     #F8F6F7;  /* page background, light */
  --sm-paper:      #FFFFFF;  /* cards, header, surfaces on ground */
  --sm-night:      #0A0708;  /* dark surfaces (intro sheet, covers, dark bands) */
  --sm-night-2:    #1B1418;  /* raised surface on night */

  /* ---------- Color: brand ---------- */
  --sm-magenta:    #CB1D85;  /* the action color: buttons, links, eyebrows */
  --sm-magenta-hover:#B4176F;
  --sm-plum:       #490839;  /* bands, panels, emphasis blocks */
  --sm-pink:       #F3ACCA;  /* accent on plum and night; PDF accent */
  --sm-blush:      #F9E4EE;  /* soft band background */
  --sm-blush-ink:  #F4DCEA;  /* body text on plum */

  /* ---------- Color: category palette (calendars, legends, charts) ---------- */
  --sm-cat-podcast:    #CB1D85;
  --sm-cat-feature:    #490839;
  --sm-cat-byline:     #8A6F7E;
  --sm-cat-commentary: #171015;
  --sm-cat-stage:      #B88A3E;

  /* ---------- Type ---------- */
  --sm-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --sm-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --sm-h1:  clamp(40px, 5.6vw, 72px);   /* Oswald 400, uppercase, lh 0.98 */
  --sm-h2:  clamp(28px, 3.6vw, 44px);   /* Oswald 400, uppercase, lh 1.05 */
  --sm-h3:  clamp(20px, 2.2vw, 26px);   /* Oswald 400, uppercase, lh 1.15 */
  --sm-h4:  17px;                        /* Oswald 500, uppercase, lh 1.2 */
  --sm-eyebrow: 11px;                    /* Oswald 500, uppercase, .30em */
  --sm-lede: 19px;                       /* Montserrat 400, lh 1.55 */
  --sm-text: 17px;                       /* Montserrat 400, lh 1.6 */
  --sm-small: 14.5px;                    /* Montserrat 400, lh 1.55 */
  --sm-micro: 12.5px;                    /* Montserrat 500 */

  /* ---------- Layout ---------- */
  --sm-wrap: 1120px;        /* max width of every content wrapper */
  --sm-gutter: 28px;        /* side padding, desktop */
  --sm-gutter-sm: 20px;     /* side padding, phone (<= 640px) */
  --sm-measure: 66ch;       /* max line length for running text */
  --sm-section: 72px;       /* vertical padding of a section */
  --sm-section-sm: 52px;

  /* ---------- Shape ---------- */
  --sm-pill: 999px;         /* buttons, inputs, toggles: anything you click or type in */
  --sm-r-img: 14px;         /* product and content images, video frames */
  --sm-r-card: 2px;         /* cards, panels, chips, banners: anything you read */
  --sm-r-select: 12px;      /* large selectable answer cards (assessment) */

  /* ---------- Header ---------- */
  --sm-header-h: 65px;
  --sm-logo-w: 84px;        /* /images/logo.png, never resized */
  --sm-logo-h: 42px;
  --sm-banner-h: 44px;

  /* ---------- Motion ---------- */
  --sm-ease: cubic-bezier(.2,.7,.2,1);
  --sm-fast: 160ms;
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sm-ground);color:var(--sm-ink);font:400 var(--sm-text)/1.6 var(--sm-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 14px}
h1,h2,h3,h4,.sm-display{font-family:var(--sm-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;margin:0;text-wrap:balance}
h1{font-size:var(--sm-h1);line-height:.98}
h2{font-size:var(--sm-h2);line-height:1.05}
h3{font-size:var(--sm-h3);line-height:1.15}
h4{font-size:var(--sm-h4);line-height:1.2;font-weight:500}
h1 em,h2 em,h3 em{font-style:normal;color:var(--sm-magenta)}
.sm-eyebrow{font:500 var(--sm-eyebrow)/1 var(--sm-display);letter-spacing:.3em;text-transform:uppercase;color:var(--sm-magenta)}
.sm-lede{font-size:var(--sm-lede);line-height:1.55;color:var(--sm-ink-2);max-width:var(--sm-measure)}
.sm-small{font-size:var(--sm-small);color:var(--sm-ink-2)}
.sm-measure{max-width:var(--sm-measure)}
:focus-visible{outline:2px solid var(--sm-magenta);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.sm-wrap{max-width:var(--sm-wrap);margin:0 auto;padding-inline:var(--sm-gutter)}
@media (max-width:640px){.sm-wrap{padding-inline:var(--sm-gutter-sm)}}
.sm-section{padding-block:var(--sm-section)}
@media (max-width:640px){.sm-section{padding-block:var(--sm-section-sm)}}

/* Bands */
.sm-band-paper{background:var(--sm-paper)}
.sm-band-blush{background:var(--sm-blush)}
.sm-band-plum{background:var(--sm-plum);color:#fff}
.sm-band-plum p{color:var(--sm-blush-ink)}
.sm-band-plum .sm-eyebrow{color:var(--sm-pink)}
.sm-band-plum h1 em,.sm-band-plum h2 em,.sm-band-plum h3 em{color:var(--sm-pink)}
.sm-band-night{background:var(--sm-night);color:#fff}
.sm-band-night .sm-eyebrow{color:var(--sm-pink)}

/* =====================================================================
   BUTTONS (pill, always)
   ===================================================================== */
.sm-btn{display:inline-flex;align-items:center;gap:.5em;border-radius:var(--sm-pill);background:var(--sm-magenta);color:#fff;text-decoration:none;font:700 15px/1 var(--sm-body);letter-spacing:.01em;padding:13px 26px;border:1.5px solid var(--sm-magenta);cursor:pointer;transition:background var(--sm-fast) var(--sm-ease),border-color var(--sm-fast) var(--sm-ease)}
.sm-btn:hover{background:var(--sm-magenta-hover);border-color:var(--sm-magenta-hover)}
.sm-btn--lg{font-size:17px;padding:18px 38px}
.sm-btn--ghost{background:transparent;color:var(--sm-ink);border-color:var(--sm-ink)}
.sm-btn--ghost:hover{background:var(--sm-ink);color:#fff;border-color:var(--sm-ink)}
.sm-btn--light{background:#fff;color:var(--sm-plum);border-color:#fff}          /* on plum or night */
.sm-btn--light:hover{background:var(--sm-blush);border-color:var(--sm-blush)}
.sm-link{color:var(--sm-magenta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sm-link:hover{color:var(--sm-magenta-hover)}

/* Responsive label (v1.1): a long label with a short one for phones.
   <a class="sm-btn"><span class="sm-text-long">Get Your Expertise, Codified</span><span class="sm-text-short">Get Codified</span> &rarr;</a>
   Below 480px only the short one shows. Works on any button or link. */
.sm-text-short{display:none}
@media (max-width:480px){.sm-text-long{display:none}.sm-text-short{display:inline}}

/* =====================================================================
   FORMS (pill inputs)
   ===================================================================== */
.sm-input{width:100%;font:400 16px/1.2 var(--sm-body);color:var(--sm-ink);background:var(--sm-paper);border:1.5px solid var(--sm-line);border-radius:var(--sm-pill);padding:14px 20px}
.sm-input::placeholder{color:var(--sm-muted)}
.sm-input:focus{outline:none;border-color:var(--sm-magenta)}
.sm-optin{display:flex;gap:10px;max-width:520px}
.sm-optin .sm-input{flex:1;min-width:0}
@media (max-width:520px){.sm-optin{flex-direction:column}}
.sm-label{display:block;font:600 13px/1.3 var(--sm-body);margin:0 0 6px;color:var(--sm-ink)}
textarea.sm-input{border-radius:18px;min-height:120px;resize:vertical}

/* =====================================================================
   IMAGES AND VIDEO
   ===================================================================== */
.sm-img{border-radius:var(--sm-r-img)}
.sm-img--bleed{border-radius:0}               /* the one exception: a hero portrait that sits on the band below it */
.sm-video{position:relative;aspect-ratio:16/9;max-width:960px;margin-inline:auto;border-radius:var(--sm-r-img);overflow:hidden;background:var(--sm-night)}
.sm-video iframe,.sm-video img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}

/* =====================================================================
   CARDS, CHIPS (square)
   ===================================================================== */
.sm-card{background:var(--sm-paper);border:1px solid var(--sm-line);border-radius:var(--sm-r-card);padding:22px}
.sm-chip{display:inline-block;border:1px solid currentColor;border-radius:var(--sm-r-card);padding:7px 12px;font:500 12px/1 var(--sm-display);letter-spacing:.16em;text-transform:uppercase}

/* =====================================================================
   HEADER (identical on every page)
   ===================================================================== */
.sm-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--sm-line)}
.sm-header .sm-wrap{height:var(--sm-header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.sm-logo{display:block;flex:none;width:var(--sm-logo-w);height:var(--sm-logo-h)}
.sm-logo img{width:var(--sm-logo-w);height:var(--sm-logo-h)}
.sm-nav{display:flex;align-items:center;gap:26px}
.sm-nav a:not(.sm-btn){font:600 14px/1 var(--sm-body);text-decoration:none;color:var(--sm-ink)}
.sm-nav a:not(.sm-btn):hover{color:var(--sm-magenta)}
@media (max-width:640px){.sm-nav a:not(.sm-btn){display:none}.sm-header .sm-btn{padding:11px 18px;font-size:14px}}
/* v1.4: a nav link marked .sm-nav__keep stays beside the button on phones (the site nav's "Mastermind") */
@media (max-width:640px){.sm-nav{gap:18px}.sm-nav a.sm-nav__keep{display:inline;font-size:13px}}

/* =====================================================================
   BANNER (optional, always directly under the header)
   ===================================================================== */
.sm-banner{background:var(--sm-plum);color:#fff;font:500 14px/1.3 var(--sm-body)}
.sm-banner .sm-wrap{min-height:var(--sm-banner-h);display:flex;align-items:center;justify-content:center;gap:14px;padding-block:10px;text-align:center}
.sm-banner a{color:var(--sm-pink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sm-banner__close{background:none;border:0;color:var(--sm-pink);font:400 22px/1 var(--sm-display);cursor:pointer;margin-left:auto;padding:0 2px}

/* =====================================================================
   FOOTER (identical on every page)
   ===================================================================== */
.sm-footer{background:var(--sm-ground);border-top:1px solid var(--sm-line)}
.sm-footer .sm-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:26px;font:400 12.5px/1.4 var(--sm-body);color:var(--sm-ink-2)}
.sm-footer__social{display:flex;gap:18px;justify-content:center}
.sm-footer__social a{color:var(--sm-ink);display:inline-flex;transition:color var(--sm-fast) var(--sm-ease)}
.sm-footer__social a:hover{color:var(--sm-magenta)}
.sm-footer__social svg{width:20px;height:20px;fill:currentColor}
.sm-footer__legal{justify-self:end;display:flex;gap:8px;align-items:center}
.sm-footer__legal a{color:var(--sm-ink-2);text-decoration:none;transition:color var(--sm-fast) var(--sm-ease)}
.sm-footer__legal a:hover{color:var(--sm-magenta)}
@media (max-width:640px){
  .sm-footer .sm-wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
  .sm-footer__legal{justify-self:center}
}