/* ======================================================================
   NATWERTH.COM GLOBAL STYLESHEET
   Version: 0.3.1  •  Date: 2025-08-14  •  Owner: Nat
   Notes: Reorganized (no functional changes). Clear sections + TOC.
   Changelog:
     - 2025-08-14 v0.3.1: Reordered into Tokens → Base → Utilities → Primitives
                          → Components → Header. Grouped variations; preserved cascade.
     - 2025-08-13 v0.3.0: Token tidy; added --surface tokens; refined buttons,
                          link utilities, inputs, layout helpers; added ::selection.
     - 2025-08-13 v0.2.0: Added COMPONENTS section placeholder; added brand aliases.
     - 2025-08-13 v0.1.1: Split globals vs header; added utilities + tokens.
     - 2025-08-12 v0.1.0: Initial header with blur + mobile panel.
   ====================================================================== */

 /* =========================
    TABLE OF CONTENTS
    1) Tokens & Variables
    2) Base & Typography
    3) Utilities (layout, spacing, visuals, helpers)
    4) Primitive Components (card/tile, buttons, links, inputs, chips/badges)
    5) Composite/Pattern Components (cards, swatches, toast, copy)
    6) Header Component (scoped)
    ========================= */


 /* ╔══════════════════════════════════════════════════════════════════════╗
    ║  1) TOKENS & VARIABLES                                               ║
    ╚══════════════════════════════════════════════════════════════════════╝ */

 :where(html,body){ margin:0 } /* base reset */
*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: inherit; }
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }

 :root{
   /* Core palette */
   --color-text:#111;
   --color-muted:#5b5b5b;
   --color-bg:#ffffff;
   --color-border:rgba(0,0,0,.08);
   --color-border-strong:rgba(0,0,0,.15);

   /* Convenience surfaces */
   --surface:#ffffff;
   --surface-2:#f7f7f8;

   /* Brand colors (initial) */
   --brand-primary:#0E6839;
   --brand-primary-2:#3A8056;
   --brand-secondary:#4B3F5E; /* Smoky Plum */
   --brand-accent:#F59E0B;
   --brand-success:#16A34A;
   --brand-danger:#DC2626;
   --brand-muted:#6B7280;

   /* Neutrals / site */
   --ink:#0f172a;
   --footer-bg:#fdf8f4;
   --footer-text:#a09484;
   --earth-clay:#b5651d;

   /* Existing header vars (kept) */
   --hover-green:rgb(14, 104, 57);
   --focus-blue:#3b82f6;

   /* Brand aliases (intentional override to existing behavior) */
   --brand-primary: var(--hover-green);
   --brand-accent: var(--focus-blue);

   /* Frost/blur */
   --frost: rgba(255,255,255,0.65);
   --blur: 20px;

   /* Spacing */
   --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
   --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;

   /* Radii */
   --radius-sm:8px; --radius-md:12px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;

   /* Shadows */
   --shadow-sm:0 2px 8px rgba(0,0,0,.05);
   --shadow-md:0 6px 20px rgba(0,0,0,.06);
   --shadow-lg:0 12px 32px rgba(0,0,0,.10);

   /* Header height (script-updated) */
   --header-h:54px;

  /* Type scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fs-0:0.875rem; --fs-1:1rem; --fs-2:1.125rem; --fs-3:1.25rem;
  --fs-4:1.5rem; --fs-5:1.875rem; --fs-6:2.25rem; --fs-7:3rem;

  /* Safe area insets for mobile notch support */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
 }

  /* Motion-reduce guard */
  @media (prefers-reduced-motion: reduce){
   *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  }


 /* ╔══════════════════════════════════════════════════════════════════════╗
    ║  2) BASE & TYPOGRAPHY                                                ║
    ╚══════════════════════════════════════════════════════════════════════╝ */

  :root{ color-scheme: light; }
  ::selection{ background: color-mix(in oklab, var(--brand-accent) 15%, transparent); }

 body{
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: var(--fs-1);
  overflow-x: hidden;
 }
  p,ul,ol{ margin: var(--space-3) 0; }
  small{ font-size: var(--fs-0); color: var(--color-muted); }

  h1, .h-display{
   font-weight: 800;
   font-size: clamp(32px, 4.2vw, 44px);
   line-height: 1.1;
   letter-spacing: 0;
   margin: 0 0 var(--space-3);
  }
  h2, .h-section{
   font-weight: 700;
   font-size: clamp(22px, 2.6vw, 28px);
   line-height: 1.2;
   letter-spacing: 0;
   margin: 0 0 var(--space-3);
  }
  h3{ font-size: var(--fs-5); line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--space-3); }
  h4{ font-size: var(--fs-4); line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--space-3); }
  h5{ font-size: var(--fs-3); line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--space-3); }
  h6{ font-size: var(--fs-2); line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--space-3); }

  .body-text, .body-preview{
   font-size: 16px;
   line-height: 1.55;
   letter-spacing: 0;
  }

  code, .c-code{ font-family: var(--font-mono, monospace); font-size: .95em; }

  /* Final link base (placed after earlier variants to preserve cascade) */
  a{
   color: var(--brand-accent);
   text-decoration: none;
   text-underline-offset: 3px;
  }


 /* ╔══════════════════════════════════════════════════════════════════════╗
    ║  3) UTILITIES                                                         ║
    ╚══════════════════════════════════════════════════════════════════════╝ */

  /* Horizontal scrolling */
  .u-hscroll {
   display: flex;
   gap: var(--space-4);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding-bottom: var(--space-3);
  }
  .u-hscroll > * {
   flex: 0 0 auto;
   scroll-snap-align: start;
  }
  .u-hscroll::-webkit-scrollbar {
   height: 6px;
  }
  .u-hscroll::-webkit-scrollbar-thumb {
   background: var(--color-border-strong);
   border-radius: 3px;
  }

  /* Frosted/backdrop surface */
  .frosted-panel{
   background: var(--frost);
   -webkit-backdrop-filter: blur(var(--blur));
   backdrop-filter: blur(var(--blur));
  }

  /* Layout */
.container{ box-sizing:border-box; width:min(100%,1100px); margin-inline:auto; padding-inline: var(--space-4); }
  .grid{ display:grid; gap: var(--space-4); }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  @media (min-width:768px){ .grid-2{ grid-template-columns: repeat(2,1fr); } }
  @media (min-width:1024px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }

  /* Viewport bleed */
.u-bleed{
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
}
@media (max-width:767px){
  .u-bleed-mobile{
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
    border-radius: 0;
  }
}

  /* Spacing helpers */
  .section-pad{ padding-block: var(--space-6); }
  .section-pad-lg{ padding-block: var(--space-8); }
  .gap-sm{ gap: var(--space-2); }
  .gap-md{ gap: var(--space-4); }
  .gap-lg{ gap: var(--space-6); }

  /* Visual helpers */
  .rounded-sm{ border-radius: var(--radius-sm); }
  .rounded-md{ border-radius: var(--radius-md); }
  .rounded-lg{ border-radius: var(--radius-lg); }
  .rounded-xl{ border-radius: var(--radius-xl); }
  .rounded-full{ border-radius: var(--radius-full); }
  .shadow-sm{ box-shadow: var(--shadow-sm); }
  .shadow-md{ box-shadow: var(--shadow-md); }
  .shadow-lg{ box-shadow: var(--shadow-lg); }

  /* Color utilities */
  .text-footer-text{ color: var(--footer-text); }
  .text-muted{ color: var(--color-muted); }
  .text-brand-primary{ color: var(--brand-primary); }
  .text-brand-secondary{ color: var(--brand-secondary); }
  .text-brand-accent{ color: var(--brand-accent); }
  .bg-surface{ background: var(--surface); }
  .bg-surface-2{ background: var(--surface-2); }
  .bg-footer{ background: var(--footer-bg); }
  .bg-brand-primary{ background: var(--brand-primary); color:#fff; }
  .bg-brand-secondary{ background: var(--brand-secondary); color:#fff; }
  .bg-brand-accent{ background: var(--brand-accent); color:#fff; }
  .heading-muted{ color: var(--brand-muted); font-weight: 500; }
  .lead{ font-size: 1.125rem; line-height: 1.6; }
  .section-border{ border-top:1px dashed #e5e7eb; padding-top: var(--space-5); margin-top: var(--space-8); }

  /* Aspect ratio helper */
  .aspect-16x9{ position:relative; }
  .aspect-16x9 > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .aspect-16x9::before{ content:""; display:block; padding-top:56.25%; }

  /* Focus/Accessibility */
  .focus-ring:focus-visible{ outline:none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 35%, transparent); }
  .sr-only{
   position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* Scroll lock utility */
  html.no-scroll,
  html.no-scroll body{
    overflow: hidden;
    height: 100%;
  }

  /* Card shadow utilities (kept) */
  .c-card--shadow-sm{ box-shadow: var(--shadow-sm); }
  .c-card--shadow-md{ box-shadow: var(--shadow-md); }
  .c-card--shadow-lg{ box-shadow: var(--shadow-lg); }