/* ==========================================================================
   SUMA — Web layer (web/site.css)
   --------------------------------------------------------------------------
   The small set of rules the shipped website shares across every page:
     1. Page grain          <body data-grain>
     2. Reveal on scroll    .reveal  +  [data-stagger] grids   (web/site.js)
     3. Grain surfaces      .suma-grain + a recipe modifier
     4. Paper sheet         .suma-paper
     5. Web type + buttons  .sw-* utilities for hand-built pages
   Everything is opt-in by class or attribute; nothing here restyles bare
   elements. Retired effects (ambient canvases, particles, mesh, grid,
   sweep, canopy, cursor ring, belts) are gone — see guidelines/retired.md.
   ========================================================================== */

/* ---- 1. Page grain ------------------------------------------------------
   A plain, low-opacity texture over the whole page. No blend mode: a
   full-viewport blend layer costs every frame (a lesson from the site). */
body[data-grain]::before{
  content:""; position:fixed; inset:0; z-index:6; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px; opacity:0.11;
}

/* ---- 2. Reveal on scroll -------------------------------------------------
   Content is visible by default. web/site.js "arms" only elements that are
   below the fold at load, so nothing depends on JS to become visible.
   Content moves once; nothing loops behind it. */
.reveal{ transition:opacity .7s ease, transform .7s cubic-bezier(.2,.72,.18,1); }
.reveal.armed{ opacity:0; transform:translateY(22px); }
[data-stagger] > .armed{ opacity:0; transform:translateY(18px); }
[data-stagger] > *{ transition:opacity .7s ease, transform .7s cubic-bezier(.2,.72,.18,1); }

/* ---- 3. Grain surfaces ---------------------------------------------------
   The brand-loved treatment: a soft multi-stop diagonal wash with visible
   static on top. Dark recipes take the white tile (140px, overlay, .8);
   light recipes take the ink tile (multiply). Children sit above the grain.
     <div class="suma-grain suma-grain--forest-gold">…</div>            */
.suma-grain{ position:relative; isolation:isolate; background-color:#10312a; color:#e6dcc8; }
.suma-grain::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:url('../assets/grain/grain-tile-white.svg'); background-size:140px 140px;
  mix-blend-mode:overlay; opacity:0.8;
}
.suma-grain > *{ position:relative; z-index:1; }
.suma-grain--forest-gold  { background-image:var(--grain-forest-gold); }
.suma-grain--forest-sage  { background-image:var(--grain-forest-sage); }
.suma-grain--forest-sand  { background-image:var(--grain-forest-sand); }
.suma-grain--forest-brass { background-image:var(--grain-forest-brass); }
.suma-grain--forest-ember { background-image:var(--grain-forest-ember); }
.suma-grain--slate        { background-image:var(--grain-slate); }
.suma-grain--imagine      { background-image:var(--grain-imagine); }
.suma-grain--night        { background-image:var(--grain-night); }
.suma-grain--cap-charter  { background-image:var(--grain-cap-charter); }
.suma-grain--cap-insight  { background-image:var(--grain-cap-insight); }
.suma-grain--cap-connect  { background-image:var(--grain-cap-connect); }
.suma-grain--bronze       { background-image:var(--grain-hover-bronze); }
.suma-grain--open         { background-image:var(--grain-open-forest); }
/* Light recipes: forest ink, grain multiplied in */
.suma-grain--light{ color:#10312a; background-color:#f0e9d8; }
.suma-grain--light::after{ background-image:url('../assets/grain/grain-tile.svg'); background-size:240px 240px; mix-blend-mode:multiply; opacity:0.6; }
.suma-grain--meadow     { background-image:var(--grain-meadow); }
.suma-grain--dawn       { background-image:var(--grain-dawn); }
.suma-grain--sand       { background-image:radial-gradient(105% 78% at 100% 100%, rgba(200,167,102,0.2) 0%, rgba(200,167,102,0) 62%), radial-gradient(96% 76% at 0% 0%, rgba(250,248,242,0.36) 0%, rgba(250,248,242,0) 62%), var(--grain-sand); border:1px solid #dccfb5; box-shadow:inset 0 1px 0 rgba(255,255,255,0.45); }
.suma-grain--sand::after{ background-image:url('../assets/grain/grain-fine.png'); background-size:120px 120px; mix-blend-mode:soft-light; opacity:1; }
.suma-grain--cap-light-gold  { background-image:var(--grain-cap-light-gold); }
.suma-grain--cap-light-sage  { background-image:var(--grain-cap-light-sage); }
.suma-grain--cap-light-olive { background-image:var(--grain-cap-light-olive); }

/* ---- 4. Paper sheet ------------------------------------------------------ */
.suma-paper{ background-color:#f7f1e5; background-image:url('../assets/grain/grain-tile-soft.svg'); color:#10312a; }

/* ---- 5. Web type + buttons (for hand-built pages) ------------------------ */
.sw-wrap{ max-width:var(--web-column); margin:0 auto; padding:0 var(--web-gutter); box-sizing:border-box; }
.sw-section{ padding:var(--web-section-y) 0; }
.sw-eyebrow{ font-family:var(--font-subtitle); font-size:11px; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; line-height:1.4; color:#9c7f4d; margin:0 0 18px; }
.sw-eyebrow--dark{ color:#c9a67e; }
.sw-label{ font-family:var(--font-subtitle); font-size:10px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:#9c7f4d; }
.sw-label--dark{ color:#8fa396; }
.sw-hero{ font-family:var(--font-display); font-weight:400; font-size:var(--type-hero); line-height:1.04; letter-spacing:-0.02em; color:#10312a; margin:0; text-wrap:balance; }
.sw-h1{ font-family:var(--font-display); font-weight:400; font-size:var(--type-h1); line-height:1.08; letter-spacing:-0.016em; color:#10312a; margin:0; text-wrap:balance; }
.sw-h2{ font-family:var(--font-display); font-weight:400; font-size:var(--type-h2); line-height:1.08; letter-spacing:-0.018em; color:#10312a; margin:0; text-wrap:balance; }
.sw-statement{ font-family:var(--font-display); font-weight:400; font-size:var(--type-statement); line-height:1.08; letter-spacing:-0.018em; color:#10312a; margin:0; text-wrap:balance; }
.sw-lead{ font-family:var(--font-sans); font-weight:300; font-size:var(--type-lead); line-height:1.6; color:#2f3833; margin:0; }
.sw-sub{ font-family:var(--font-subtitle); font-weight:400; font-size:var(--type-sub); line-height:1.55; color:#4a534d; margin:0; }
.sw-body{ font-family:var(--font-sans); font-weight:300; font-size:16px; line-height:1.62; color:#2f3833; }
.sw-dark .sw-hero, .sw-dark .sw-h1, .sw-dark .sw-h2, .sw-dark .sw-statement{ color:#e6dcc8; }
.sw-dark .sw-lead, .sw-dark .sw-body{ color:#cabfa3; }
.sw-dark .sw-sub{ color:#a6ad9d; }
.sw-dark .sw-eyebrow{ color:#c9a67e; }
.sw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; box-sizing:border-box; font-family:var(--font-sans); font-size:16px; font-weight:500; line-height:1; letter-spacing:0.01em; padding:15px 28px; border-radius:999px; border:1px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background 160ms ease, color 160ms ease, border-color 160ms ease; }
.sw-btn--primary{ background:#10312a; border-color:#10312a; color:#f4f0e6; }
.sw-btn--primary:hover{ background:#173a30; border-color:#173a30; }
.sw-btn--secondary{ background:transparent; border-color:#b9ab88; color:#10312a; }
.sw-btn--secondary:hover{ border-color:#10312a; }
.sw-btn--outline{ background:transparent; border-color:#10312a; color:#10312a; font-size:15px; padding:12px 22px; }
.sw-btn--outline:hover{ background:#10312a; color:#f4f0e6; }
.sw-btn--cream{ background:#e6dcc8; border-color:#e6dcc8; color:#08231c; }
.sw-btn--cream:hover{ background:#ffffff; border-color:#ffffff; }
.sw-btn--ghost-dark{ background:transparent; border-color:rgba(230,220,200,0.42); color:#e6dcc8; }
.sw-btn--ghost-dark:hover{ border-color:#e6dcc8; background:rgba(230,220,200,0.1); }
.sw-link{ font-family:var(--font-sans); font-size:15px; font-weight:500; color:#10312a; text-decoration:none; border-bottom:1px solid #cdc1a4; padding-bottom:2px; transition:border-color 160ms ease; }
.sw-link:hover{ border-color:#10312a; }
.sw-link--dark{ color:#d8b87c; border-color:rgba(216,184,124,0.4); }
.sw-link--dark:hover{ border-color:#d8b87c; }

/* Capability names inside a Canela line stay in Raleway (INSIGHT is never Canela) */
.pname{ font-family:var(--font-subtitle); font-weight:300; letter-spacing:0.06em; }

/* ---- Reduced motion: a still, finished page ----------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal, [data-stagger] > *{ transition:none !important; }
  .reveal.armed, [data-stagger] > .armed{ opacity:1 !important; transform:none !important; }
  .sw-btn{ transition:none; }
}