/* Sonoma Botanicals — "Apothecary Label" site styles (direction B).
   Load AFTER sb-tokens.css. Every color/size comes from a token; do not hard-code hexes.
   Class naming: .sb-<block>__<element>--<modifier>. No framework, no build step. */

/* ---------- Motion & composites (from the design system's bundle.css) ---------- */
:root{
  --focus-ring:0 0 0 3px color-mix(in oklch, var(--garden-500) 35%, transparent);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms;--dur-base:240ms;--dur-reveal:720ms;
  --container:1200px;
  --header-shadow:0 1px 0 var(--linen-200),0 6px 20px -12px rgba(58,53,44,.18);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--linen-100);color:var(--text-body);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--text-heading);letter-spacing:var(--ls-display);text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--calendula-200);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px}
.sb-container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
[hidden]{display:none!important}
.sb-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type helpers ---------- */
.sb-mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--stone-600);text-transform:uppercase}
.sb-mono--accent{color:var(--calendula-700);font-size:13px;letter-spacing:.12em}
.sb-eyebrow{display:inline-flex;align-items:center;gap:12px;font:var(--fw-medium) var(--fs-eyebrow)/1.2 var(--font-sans);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--text-brand)}
.sb-eyebrow--accent{color:var(--text-accent)}
.sb-eyebrow--rule::before,.sb-eyebrow--rule::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.sb-h1{font-size:clamp(44px,5.4vw,78px);line-height:1.06;letter-spacing:-.01em}
.sb-h2{font-size:clamp(30px,3.2vw,44px);line-height:1.15}
.sb-h3{font-size:25px;line-height:1.25}
.sb-lead{font-size:20px;font-weight:var(--fw-light);line-height:1.6}

/* ---------- Button (pill; uppercase, tracked) ---------- */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 32px;min-height:44px;
  font:var(--fw-medium) 14px/1 var(--font-sans);letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.sb-btn:active{transform:translateY(1px) scale(.985)}
.sb-btn[disabled],.sb-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.sb-btn--lg{padding:18px 44px;font-size:15px}
.sb-btn--sm{padding:10px 20px;font-size:13px}
.sb-btn--primary{background:var(--action-primary);color:var(--text-on-brand)}
.sb-btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-brand)}
.sb-btn--outline{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.sb-btn--outline:hover{background:var(--ink-900);color:var(--paper)}
.sb-btn--accent{background:var(--action-accent);color:var(--ink-900)}
.sb-btn--accent:hover{background:var(--action-accent-hover);color:var(--ink-900)}

/* ---------- FramedPanel (double hairline from the logo panel; square corners) ---------- */
.sb-frame{background:var(--white);border:1px solid var(--stone-500);padding:var(--frame-inset)}
.sb-frame--paper{background:var(--paper)}
.sb-frame__inner{border:1px solid var(--stone-500);padding:32px;height:100%}
.sb-frame--hero .sb-frame__inner{padding:clamp(32px,6vw,72px) clamp(20px,5vw,72px)}
.sb-frame--form .sb-frame__inner{padding:clamp(24px,5vw,56px)}
.sb-double-rule{width:120px;height:5px;border-top:1px solid var(--stone-500);border-bottom:1px solid var(--stone-500)}

/* ---------- Header (masthead) ---------- */
.sb-header{background:var(--paper)}
.sb-topline{border-bottom:1px solid var(--linen-200)}
.sb-topline .sb-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:10px}
.sb-topline a{color:var(--garden-700);text-decoration:none}
.sb-masthead{display:flex;justify-content:center;padding-block:28px 6px}
.sb-masthead__logo{width:260px}
.sb-navbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linen-300);transition:box-shadow var(--dur-base) var(--ease-out)}
.sb-navbar.is-stuck{box-shadow:var(--header-shadow)}
.sb-navbar__inner{position:relative;display:flex;justify-content:center;padding-block:6px}
.sb-navbar__wordmark{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:22px;color:var(--ink-900);text-decoration:none;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.sb-navbar.is-stuck .sb-navbar__wordmark{opacity:1;pointer-events:auto}
@media (max-width:900px){.sb-navbar__wordmark{display:none}}
.sb-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 28px;margin:0;padding:0;list-style:none}
.sb-nav li{display:flex;align-items:center;gap:28px}
.sb-nav li+li::before{content:"";width:4px;height:4px;border-radius:999px;background:var(--stone-400)}
.sb-nav a{display:inline-block;padding:12px 0;font:var(--fw-medium) 13px/1 var(--font-sans);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--ink-900);text-decoration:none;position:relative}
.sb-nav a:hover,.sb-nav a[aria-current="page"],.sb-nav a.is-active{color:var(--garden-700)}
.sb-nav a::after{content:"";position:absolute;left:25%;right:25%;bottom:4px;height:2px;background:var(--calendula-500);transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out)}
.sb-nav a:hover::after,.sb-nav a.is-active::after{transform:scaleX(1)}

/* ---------- Sections ---------- */
.sb-section{padding-block:clamp(64px,8vw,104px)}
.sb-section--paper{background:var(--paper)}
.sb-section--ruled{border-top:1px solid var(--linen-300);border-bottom:1px solid var(--linen-300)}
.sb-section__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:48px}
.sb-stack{display:flex;flex-direction:column;gap:22px}

/* Hero */
.sb-hero{padding-block:clamp(40px,6vw,72px) 56px}
.sb-hero__panel-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.sb-hero__panel-body .sb-h1{max-width:13em}
.sb-hero__panel-body .sb-lead{max-width:36em}
.sb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.sb-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:40px}
.sb-fig{margin:0;display:flex;flex-direction:column;gap:10px}
.sb-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xs)}

/* Features */
.sb-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.sb-feature{display:flex;flex-direction:column;gap:14px}
.sb-feature p{font-size:16px}

/* Services: product index */
.sb-split{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.sb-split__main{flex:1 1 520px;min-width:0}
.sb-split__aside{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:10px}
.sb-split__aside img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-xs)}
.sb-photo-placeholder{aspect-ratio:3/4;background:var(--linen-200);border:1px dashed var(--stone-500);display:flex;align-items:center;justify-content:center}
.sb-index{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--ink-900);counter-reset:sb-index}
.sb-index li{display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linen-300);counter-increment:sb-index}
.sb-index li::before{content:counter(sb-index,decimal-leading-zero);font-family:var(--font-mono);font-size:13px;color:var(--stone-600);width:32px;flex:none}
.sb-index__name{flex:1;font-family:var(--font-display);font-size:24px;line-height:1.25;color:var(--ink-900)}
.sb-index__meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--stone-600);text-transform:uppercase}

/* About */
.sb-about{display:flex;flex-wrap:wrap;gap:48px 80px}
.sb-about__title{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:18px}
.sb-about__body{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px;line-height:1.7}
.sb-about__body .sb-lead{font-size:21px;color:var(--ink-900)}

/* Contact */
.sb-contact{max-width:920px;margin:0 auto}
.sb-contact__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:32px}
.sb-form{display:flex;flex-direction:column;gap:20px}
.sb-form__row{display:flex;flex-wrap:wrap;gap:16px}
.sb-form__row>.sb-field{flex:1 1 220px;min-width:0}
.sb-form__submit{display:flex;justify-content:center}
.sb-form__note{font-size:13px;color:var(--text-subtle)}
.sb-field{display:flex;flex-direction:column;gap:8px}
.sb-label{font:var(--fw-medium) var(--fs-small)/1.6 var(--font-sans);color:var(--text-heading)}
.sb-required{color:var(--required);margin-left:3px}
.sb-input,.sb-textarea{width:100%;padding:13px 16px;font:var(--fw-regular) 16px/1.6 var(--font-sans);color:var(--text-heading);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-sm);outline:none;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.sb-textarea{resize:vertical;min-height:140px}
.sb-input:focus,.sb-textarea:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.sb-input[aria-invalid="true"],.sb-textarea[aria-invalid="true"]{border-color:var(--status-danger)}
.sb-field__error{font-size:13px;color:var(--status-danger)}
.sb-form__success{padding:40px 24px;background:var(--garden-50);text-align:center;display:flex;flex-direction:column;gap:10px}

/* Footer */
.sb-footer{background:var(--ink-900);color:var(--linen-200);padding-block:56px 36px}
.sb-footer .sb-container{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.sb-footer__name{font-family:var(--font-display);font-size:30px;color:var(--paper)}
.sb-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;list-style:none;margin:0;padding:0}
.sb-footer__nav a{display:inline-block;padding:12px 0;color:var(--calendula-300);text-decoration:none;font-size:12px;letter-spacing:var(--ls-caps-wide);text-transform:uppercase}
.sb-footer__nav a:hover{color:var(--calendula-200)}
.sb-footer .sb-mono{color:var(--stone-400)}

/* Scroll reveal (progressive; content is visible without JS) */
.js .sb-reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .sb-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .sb-reveal{opacity:1;transform:none;transition:none}}

/* ---------- Phone ---------- */
@media (max-width:600px){
  .sb-topline .sb-container{justify-content:center;text-align:center}
  .sb-topline__est{display:none}
  .sb-masthead{padding-block:18px 4px}
  .sb-masthead__logo{width:240px}
  .sb-nav{gap:0 18px}
  .sb-nav li{gap:18px}
  .sb-nav li+li::before{display:none}
  .sb-nav a{letter-spacing:.16em;font-size:12px}
  .sb-index__name{font-size:20px}
  .sb-index li{gap:14px}
  .sb-btn--lg{padding:16px 28px;font-size:14px}
  .sb-actions .sb-btn{flex:1 1 100%}
}