/* =========================================================
   NOLAVU — BRAND SYSTEM LAYER  (shared by all pages)
   ------------------------------------------------------------
   Promoted from the approved B2 direction on 2026-10-03.
   Loaded after the page stylesheet by every page except
   /contact/, which shares tokens only and must not change layout.

   Contains four things and nothing else:
     1. auxiliary category tints (low saturation, one block each)
     2. the layer-line graphic language, at reduced strength
     3. the category identity tab
     4. a transparent hit-area utility for links under 48px
   ========================================================= */

/* ---------- 1. auxiliary tints ----------
   Drawn from the real product families. Kept low-saturation and used
   at most on one section background and one tab per block. */
:root{
  --tint-diamond:    #F6EDE4;   /* warm peach  */
  --tint-diamond-2:  #E8D5C4;
  --tint-mini:       #E9EFF1;   /* powder blue */
  --tint-mini-2:     #CFDDE2;
  --tint-stone:      #F1EDE4;   /* warm stone */
  --tint-sage:       #E8EEEA;   /* the existing provisional accent, mist */
}

/* ---------- 2. layer-line graphic language ----------
   B2 measured too strong: the first read was "lots of horizontal
   lines". It is now roughly 40% lighter, concentrated near the product
   visual and the grid transition, and almost absent from the reading
   column. Mobile halves it again so it never suggests notebook paper. */
.b-layer{
  position:relative; overflow:hidden;
}
.b-layer::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    180deg,
    rgba(22,21,15,.026) 0 1px,
    transparent 1px 7px
  );
  /* pulled toward the product side; the text column stays clean */
  -webkit-mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
          mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
  opacity:.85;
}
@media (max-width:880px){
  .b-layer::before{
    background-image:repeating-linear-gradient(
      180deg,
      rgba(22,21,15,.013) 0 1px,
      transparent 1px 9px
    );
    -webkit-mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
            mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
  }
}

/* the alignment track: a single hairline with tick marks, used above a
   process. Real business source — a 2.6mm bead alignment track. */
.b-track{ position:relative; }
.b-track::before{
  content:''; position:absolute; left:0; right:0; top:0; height:7px;
  background-image:
    linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px);
  background-size:100% 1px, 100% 7px;
  background-repeat:no-repeat, repeat-x;
  opacity:.85;
}

/* ---------- 3. category identity tab ---------- */
.b-cat-tab{
  display:block; width:fit-content; position:relative; z-index:2;
  margin-bottom:-1px;
  font-size:9.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 9px;
  border-radius:1px 1px 0 0;
}
.b-cat-tab[data-cat="diamond"]  { color:#8A5A3C; background:var(--tint-diamond-2); }
.b-cat-tab[data-cat="mini"]     { color:#3F5F6B; background:var(--tint-mini-2); }

/* section-level identity tints */
.b-tint-diamond{ background:var(--tint-diamond); }
.b-tint-mini{ background:var(--tint-mini); }
.b-tint-stone{ background:var(--tint-stone); }
.b-tint-sage{ background:var(--tint-sage); }

/* ---------- 4. transparent hit area ----------
   A visual text link can sit below the 48px floor while the control it
   represents is perfectly usable, if the tap region is enlarged without
   changing what the reader sees. This utility does exactly that and
   nothing more: no larger type, no button, no box, no layout shift. */
.b-hit{ position:relative; display:inline-flex; align-items:center; min-height:48px; }
.b-hit::after{
  content:''; position:absolute; left:0; right:0;
  top:50%; height:48px; transform:translateY(-50%);
}
/* header / footer links: vertical tap room only, so the header height and
   the nav spacing are unchanged */
.b-hit-nav{ position:relative; }
.b-hit-nav::after{
  content:''; position:absolute; left:-6px; right:-6px;
  top:50%; height:40px; transform:translateY(-50%);
}
.b-hit-nav{ padding-top:10px !important; padding-bottom:10px !important; }
/* Inside the footer the links are a stacked list with room to grow, so the
   full 48px applies there. The header nav keeps 40px so the header height
   and nav spacing are unaffected. */
.footer-nav a.b-hit,
.footer-contact a.b-hit{ min-height:48px; align-items:center; }

@media (max-width:880px){
  /* mobile keeps its comfortable target; the inline nav collapses anyway */
  .b-hit{ min-height:48px; }
}

/* Skip link: measured 47.8px, a rounding artefact of the 1px top offset.
   One extra pixel of padding makes the keyboard target exact without
   moving anything the reader sees. */
.skip-link{ padding-top:9px !important; padding-bottom:9px !important; min-height:48px; display:flex; align-items:center; }

/* Mobile: the collapsed menu becomes a stacked list, so its links get the
   full 48px. Desktop keeps 40px so the nav row and header height do not
   change. Mobile is the case that matters for touch. */
@media (max-width:880px){
  .main-nav .b-hit-nav{ padding-top:14px !important; padding-bottom:14px !important; }
  .main-nav .b-hit-nav::after{ height:48px; }
  .submenu a.b-hit-nav{ padding-top:14px !important; padding-bottom:14px !important; }
  .submenu a.b-hit-nav::after{ height:48px; }
  .header-logo.b-hit-nav{ padding-top:14px !important; padding-bottom:14px !important; }
  .header-logo.b-hit-nav::after{ height:48px; }
}