/* SOMA :: TRIBE site stylesheet
   Deployed to https://soma-tribe-web.netlify.app/site.css
   Loaded by Squarespace Code Injection (header).
   Token block below is MIRRORED in the other site file.
   If you change a token, change it in both. */
/* ============================================================
   SOMA DESIGN TOKENS
   Single source of truth for palette, type, spacing, motion.
   Palette supplied 30 August. Original names were dog-brand
   vocabulary (Collar Blue, Muddy Paws) and are deliberately NOT
   used here. Hex values are exact and must not be changed.
   ============================================================ */

:root {
  /* --- Core palette (exact hex, do not alter) --- */
  --soma-ink:        #0F414C;  /* darkest blue. headings, body on light */
  --soma-primary:    #1E6980;  /* the workhorse. structure, links, buttons */
  --soma-mint:       #8BCCB4;  /* accent. highlights, positive, borders */
  --soma-mist:       #CFE3E2;  /* background. NOT white. the softening layer */
  --soma-gold:       #F1B143;  /* attention. one element at a time. never more */
  --soma-ember:      #DB7F26;  /* warning / behind. sparingly */
  --soma-moss:       #6B7F4C;  /* secondary accent. good on mist */

  /* --- Derived neutrals --- */
  --soma-white:      #FFFFFF;
  --soma-paper:      #F7FBFB;  /* mist at 25%, the default page ground */
  --soma-line:       rgba(15, 65, 76, 0.12);
  --soma-line-soft:  rgba(15, 65, 76, 0.07);
  --soma-veil:       rgba(15, 65, 76, 0.55);

  /* --- Semantic roles --- */
  --soma-bg:              var(--soma-paper);
  --soma-bg-raised:       var(--soma-white);
  --soma-bg-sunken:       var(--soma-mist);
  --soma-text:            var(--soma-ink);
  --soma-text-muted:      rgba(15, 65, 76, 0.68);
  --soma-text-invert:     var(--soma-mist);
  --soma-accent:          var(--soma-primary);
  --soma-accent-hover:    #175567;

  /* --- Contrast rules, from the palette doc ---
     ink + primary  : pass on white AND on mist
     gold + mint    : NEVER carry white text. put ink on them.
     ember on white : large text only, never body copy         */

  /* --- Type scale (fluid, 1.25 minor third) --- */
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.48rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.31rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.83vw, 2.89rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.68vw, 3.62rem);
  --step-6:  clamp(2.99rem, 2.22rem + 3.83vw, 4.52rem);

  /* --- Spacing rhythm --- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.625rem;
  --space-l:   2.625rem;
  --space-xl:  4.25rem;
  --space-2xl: 6.875rem;
  --space-3xl: 11rem;

  /* --- Form --- */
  --radius-s:  4px;
  --radius-m:  10px;
  --radius-l:  18px;
  --radius-pill: 999px;

  /* --- Elevation. Tinted, never neutral grey. This is most of
         what separates "expensive" from "template". --- */
  --shadow-s: 0 1px 2px rgba(15,65,76,.06), 0 2px 6px rgba(15,65,76,.05);
  --shadow-m: 0 2px 4px rgba(15,65,76,.05), 0 8px 20px rgba(15,65,76,.08);
  --shadow-l: 0 4px 8px rgba(15,65,76,.05), 0 18px 44px rgba(15,65,76,.11);
  --shadow-xl:0 8px 16px rgba(15,65,76,.05), 0 34px 80px rgba(15,65,76,.14);

  /* --- Motion. Slow and eased reads as considered. Fast and
         linear reads as cheap. --- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  620ms;

  /* --- Layout --- */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

/* ============================================================
   BASE REFINEMENTS
   Safe on any Squarespace 7.1 site. Nothing here depends on a
   specific block, section id, or template. Everything below
   this block IS site specific.
   ============================================================ */

/* Crisper type. Costs nothing, visible immediately. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Kerning and ligatures on headings. Small detail, reads expensive. */
h1, h2, h3, h4,
.sqs-block-html h1, .sqs-block-html h2, .sqs-block-html h3 {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Stop orphans in body copy. */
p, li { text-wrap: pretty; }

/* Selection in brand color rather than browser default blue. */
::selection { background: var(--soma-mint); color: var(--soma-ink); }

/* Focus rings that look designed rather than defaulted.
   Keyboard users only, so it never shows on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--soma-primary);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Buttons: weight, ease, and a lift on hover.
   Squarespace button classes across 7.1 variants. */
.sqs-block-button-element,
.sqs-button-element--primary,
.sqs-button-element--secondary,
.sqs-button-element--tertiary {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.sqs-block-button-element:hover,
.sqs-button-element--primary:hover,
.sqs-button-element--secondary:hover,
.sqs-button-element--tertiary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}
.sqs-block-button-element:active,
.sqs-button-element--primary:active { transform: translateY(0); }

/* Links: an underline that grows instead of appearing.
   Scoped to content areas so nav and buttons are untouched. */
.sqs-block-html a:not(.sqs-block-button-element) {
  text-decoration: none;
  background-image: linear-gradient(var(--soma-primary), var(--soma-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-base) var(--ease-out);
  padding-bottom: 1px;
}
.sqs-block-html a:not(.sqs-block-button-element):hover {
  background-size: 100% 1.5px;
}

/* Images: kill the hard edge, add a whisper of depth.
   Squarespace image blocks only, not logos or icons. */
.sqs-block-image .sqs-image-shape-container-element,
.sqs-block-image img {
  border-radius: var(--radius-m);
}

/* Smooth anchor scrolling, with an offset so a fixed header
   never covers the target heading. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 6rem; }

/* Respect the user's motion setting. Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Scroll reveal. Paired with site.js. -------------------
   Elements marked data-soma-reveal fade and rise once, on
   first entry. If JS fails, content is visible anyway. */
[data-soma-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
[data-soma-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
html:not([data-soma-js]) [data-soma-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SITE SPECIFIC
   Everything above is shared and safe. Write site work below.
   Keep sections labeled. Delete nothing above without reason.
   ============================================================ */