/* ============================================================
   brand.css — the Inter / lowercase / monochrome brand layer
   Loaded after base.css on every brand page
   (index, logo, banner, pfp, 404).

   The manuscript essay pages deliberately do NOT load this.
   ============================================================ */

:root {
  /* ── monochrome ink scale — single source of truth ──
     Pure black on pure white. The "grays" below are strictly
     achromatic (R=G=B) shades of black used only for text
     hierarchy — never chromatic hues. Images are the sole
     place colour is allowed to appear. */
  --ink: #000;        /* primary text & hairlines            */
  --muted: #6b6b6b;   /* secondary / meta text               */
  --soft: #3d3d3d;    /* tertiary / hover text               */
  --faint: #9a9a9a;   /* quietest labels / separators        */
  --line: #000;       /* dividers & borders                  */
  --hairline: rgba(0, 0, 0, 0.12); /* subtle inset outlines  */
  --bg: #fff;

  /* popover surface — one shared style for tooltips, toasts,
     chart hints, completion menus: white card, hairline-black
     border, black ink. Keeps the light, paper-like aesthetic. */
  --pop-bg: #fff;
  --pop-ink: #000;
  --pop-border: #000;

  /* spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 46px;
  --space-8: 64px;

  /* type scale — one restrained 5-step ladder shared site-wide */
  --fs-hero: 44px;   /* wordmark / page title   */
  --fs-lead: 15px;   /* intro / lead paragraph  */
  --fs-body: 13px;   /* body & default copy     */
  --fs-label: 11px;  /* section eyebrows         */
  --fs-meta: 10px;   /* quietest meta labels     */
  --track-label: 0.1em;  /* eyebrow tracking     */
  --lh-lead: 1.6;

  /* brand marks & textures */
  --brand-eye: url('assets/images/brand/jaspereye-center.svg');
  --brand-eye-left: url('assets/images/brand/jaspereye-left.svg');
  --brand-eye-right: url('assets/images/brand/jaspereye-right.svg');
  --hatch: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 14px);
  --hatch-dense: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 10px);
  --hatch-cross:
    repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, #000 0 2px, transparent 2px 14px);

  /* motion & misc tokens */
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);       /* general UI easing */
  --dur: 180ms;                               /* default transition */
  --tracking: -0.005em;                       /* default tight tracking */
  --tooltip-bg: #000;
  /* Pure black & white — no contrast/saturation softening so the
     background renders as true #fff and ink as true #000. */
  --body-filter: none;

  /* Paper grain + edge fades are OFF site-wide for the clean
     monochrome look. Flip either to `block` (globally here, or per
     page via `body { --grain: block }`) to bring the texture back. */
  --grain: none;
  --fade: none;
}

html, body { overflow-x: hidden; }
html { background: var(--bg); }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  filter: var(--body-filter);
  text-transform: lowercase;
  position: relative;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  min-height: 100vh;
}

/* Fixed SVG paper grain (gated by --grain, off by default) */
body::before {
  content: '';
  position: fixed; inset: -10px;
  display: var(--grain);
  pointer-events: none; z-index: 9997;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* Top & bottom white edge fades (gated by --fade, off by default) */
html::before, body::after {
  content: '';
  position: fixed; left: 0; right: 0;
  height: 120px; pointer-events: none; z-index: 9996;
  display: var(--fade);
}
html::before {
  top: 0;
  height: calc(120px + var(--safe-top));
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%);
}
body::after {
  bottom: 0;
  height: calc(120px + var(--safe-bottom));
  background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%);
}
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html::before, body::after { display: none !important; }
}