/* TJB.llc — shared base */
:root {
  --tjb-black: #0a0a0a;
  --tjb-ink: #111613;
  --tjb-forest: #143d2b;
  --tjb-forest-2: #1f6b3f;
  --tjb-signal: #2ecc71;
  --tjb-cream: #f4efe6;
  --tjb-paper: #faf7f1;
  --tjb-stone: #e7e1d6;
  --tjb-rule: #d7d0c2;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* Density tweak — applied to each artboard's root */
[data-density="spacious"] {
  --d-section-py: 140px;
  --d-block-gap: 64px;
  --d-card-pad: 36px;
  --d-h1: 96px;
  --d-h2: 56px;
  --d-body: 18px;
  --d-eyebrow: 13px;
}
[data-density="compact"] {
  --d-section-py: 84px;
  --d-block-gap: 36px;
  --d-card-pad: 24px;
  --d-h1: 72px;
  --d-h2: 40px;
  --d-body: 16px;
  --d-eyebrow: 12px;
}

a { color: inherit; }

button { font: inherit; cursor: pointer; }

/* Striped placeholder for imagery */
.tjb-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.06) 0 1px,
    transparent 1px 12px
  );
  background-color: rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}
.tjb-placeholder--dark {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0 1px,
    transparent 1px 12px
  );
  background-color: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
}

/* ───────────────────────────────────────────────────────────────────────────
   Mobile + tablet responsive overrides
   ───────────────────────────────────────────────────────────────────────────
   The page is built with heavy inline grid styles tuned for ~1440px.
   These rules use !important + attribute selectors to collapse those grids
   to a single column and shrink padding/typography at narrower widths.

   NB: DirectionC sets --d-h1 etc as inline styles on its root, so the
   custom-property overrides MUST use !important to win specificity.
*/

/* Global guards — apply at every width so an oversized image / pre / table
   never breaks the layout. */
html, body, #root { max-width: 100vw; }
img, svg, video, canvas { max-width: 100%; }

/* Tablet — collapse 3/4-col grids, ease density */
@media (max-width: 1024px) {
  [data-density="spacious"],
  [data-density="compact"] {
    --d-section-py: 96px !important;
    --d-card-pad: 28px !important;
    --d-h1: 72px !important;
    --d-h2: 44px !important;
    --d-body: 17px !important;
  }

  /* Multi-col grids → 2 columns at tablet */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Mobile — full single-column reflow */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  #root { overflow-x: hidden; }

  [data-density="spacious"],
  [data-density="compact"] {
    --d-section-py: 56px !important;
    --d-block-gap: 28px !important;
    --d-card-pad: 20px !important;
    --d-h1: 44px !important;
    --d-h2: 30px !important;
    --d-body: 16px !important;
    --d-eyebrow: 11px !important;
  }

  /* Collapse EVERY inline grid to a single column. React serializes inline
     styles as kebab-case in the DOM, but cover both forms defensively. */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }

  /* The top nav uses a 104px/1fr/auto grid. Hide the link rail on mobile;
     keep the brand and the Engage CTA. */
  nav > div[style*="border-left"] {
    display: none !important;
  }
  nav[style*="height: 104px"],
  nav[style*="height:104px"] {
    height: 64px !important;
  }
  nav[style*="grid-template-columns"] {
    grid-template-columns: 64px 1fr auto !important;
  }
  nav a[href="#engage"] {
    padding: 0 16px !important;
    font-size: 11px !important;
  }

  /* Kill huge fixed min-heights — let content size itself. */
  section[style*="min-height: 840"],
  section[style*="minHeight:840"],
  section[style*="min-height:840"] {
    min-height: 0 !important;
  }

  /* Universal horizontal-padding clamp.
     Hits every section, every direct child of section, and any element
     whose inline style declares horizontal padding ≥ 32px. */
  section,
  section > div,
  section > div > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 56px"],
  [style*="padding:56px"],
  [style*="padding: 48px"],
  [style*="padding:48px"],
  [style*="padding: 40px"],
  [style*="padding:40px"],
  [style*="padding: 36px"],
  [style*="padding:36px"] {
    padding: 24px 20px !important;
  }

  /* Containers with explicit max-width were sized for desktop two-column
     layouts; force them full-width on mobile. */
  [style*="max-width: 540"],
  [style*="maxWidth:540"],
  [style*="max-width: 560"],
  [style*="maxWidth:560"],
  [style*="max-width: 640"],
  [style*="maxWidth:640"],
  [style*="max-width: 720"],
  [style*="maxWidth:720"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hero h1 tightening — var change handles size, but kerning needs help. */
  h1 {
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }

  /* Button rows: wrap instead of overflow; let buttons share the row. */
  div[style*="display: flex"][style*="gap: 0"] {
    flex-wrap: wrap !important;
  }
  button[style*="padding: 20px 28px"],
  button[style*="padding:20px 28px"] {
    padding: 14px 18px !important;
    font-size: 11px !important;
    flex: 1 1 140px !important;
  }

  /* Photos full-width. */
  img[src*="the-floor"],
  img[src*="the-founder"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Marquee / horizontal scrollers shrink a little. */
  [style*="white-space: nowrap"] {
    font-size: 13px !important;
  }

  /* Wide tables / pre blocks shouldn't blow out the viewport. */
  table, pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
}

/* Extra-small — phones under 380px */
@media (max-width: 380px) {
  [data-density="spacious"],
  [data-density="compact"] {
    --d-h1: 36px !important;
    --d-h2: 26px !important;
  }
  section,
  section > div,
  section > div > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}