/* ============================================================
   Luis Rodriguez Consulting — Brand System (Direction B: Brackets)
   B-only. Cream-led editorial. Geist + Geist Mono. Navy ink, teal signal.
   Shared by the guidelines deck, logo sheet, deck template,
   letterhead, and stationery.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@300;400;500;600&display=swap');

:root {
  /* — Palette ———————————————————————————————— */
  --navy-950: #081730;
  --navy-900: #0e2240;
  --navy-800: #15294d;
  --navy-700: #1d3a63;
  --teal-700: #185b5e;
  --teal-600: #1f6e72;
  --teal-500: #2a8a8f;
  --teal-400: #3aa4a8;
  --cream-50:  #f7f2e8;
  --cream-100: #f3ece0;
  --cream-200: #e8e0d2;
  --cream-300: #d8d0c0;
  --line-ink:  rgba(14, 34, 64, 0.14);
  --line-cream: rgba(243, 236, 224, 0.16);

  /* — Type ————————————————————————————————— */
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ============================================================
   THE MARK  —  drawn square brackets wrapping the initials.
   Crisp at any scale (border-drawn, not a glyph), works to favicon.
   Control size with font-size on .lrm.
   ============================================================ */
.lrm {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  font-size: 100px;        /* the one knob */
  line-height: 1;
  color: var(--navy-900);  /* initials colour */
  --brk: var(--teal-600);  /* bracket colour  */
}
.lrm .brk {
  width: 0.30em;
  height: 0.94em;
  border: 0.082em solid var(--brk);
  box-sizing: border-box;
  flex-shrink: 0;
}
.lrm .brk.l { border-right: 0; }
.lrm .brk.r { border-left: 0; }
.lrm .lr {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1em;
  letter-spacing: -0.035em;
  font-feature-settings: 'ss01';
}
/* On dark grounds */
.lrm.inv { color: var(--cream-100); --brk: var(--teal-400); }
/* Monochrome lockups */
.lrm.mono-ink  { color: var(--navy-900); --brk: var(--navy-900); }
.lrm.mono-cream{ color: var(--cream-100); --brk: var(--cream-100); }

/* — Glyph variant (alternative refinement) — mono [ ] glyphs — */
.lrm-glyph {
  display: inline-flex;
  align-items: center;
  gap: 0.04em;
  font-family: var(--mono);
  font-size: 100px;
  line-height: 1;
  color: var(--navy-900);
  --brk: var(--teal-600);
}
.lrm-glyph .b { color: var(--brk); font-weight: 300; }
.lrm-glyph .i { font-family: var(--sans); font-weight: 600; letter-spacing: -0.035em; }
.lrm-glyph.inv { color: var(--cream-100); --brk: var(--teal-400); }

/* — Tag variant (alternative refinement) — brackets + baseline rule — */
.lrm-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 100px;
  line-height: 1;
  gap: 0.14em;
  color: var(--navy-900);
  --brk: var(--teal-600);
}
.lrm-tag .top { display: inline-flex; align-items: center; gap: 0.20em; }
.lrm-tag .brk {
  width: 0.26em; height: 0.86em;
  border: 0.075em solid var(--brk); box-sizing: border-box;
}
.lrm-tag .brk.l { border-right: 0; }
.lrm-tag .brk.r { border-left: 0; }
.lrm-tag .lr { font-family: var(--sans); font-weight: 600; font-size: 1em; letter-spacing: -0.04em; }
.lrm-tag .rule {
  font-family: var(--mono); font-weight: 500;
  font-size: 0.13em; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--brk); padding-left: 0.04em;
}
.lrm-tag.inv { color: var(--cream-100); --brk: var(--teal-400); }

/* ============================================================
   WORDMARK / LOCKUPS
   ============================================================ */
.wm {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--navy-900);
}
.wm.inv { color: var(--cream-100); }
.wm .name { display: block; }
.wm .sub {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--teal-600);
}
.wm.inv .sub { color: var(--teal-400); }

/* ============================================================
   TYPE ROLES
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--teal-600);
}
.eyebrow.inv { color: var(--teal-400); }

.display { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; line-height: 0.94; margin: 0; }
.title   { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
.lede    { font-family: var(--sans); font-weight: 400; line-height: 1.35; margin: 0; color: var(--navy-700); text-wrap: pretty; }
.body    { font-family: var(--sans); font-weight: 400; line-height: 1.5;  margin: 0; color: var(--navy-800); text-wrap: pretty; }
.inv .lede, .inv .body { color: var(--cream-200); }
.mono    { font-family: var(--mono); }

/* ============================================================
   DECK FRAME (used by guidelines + deck template)
   ============================================================ */
.frame {
  width: 100%; height: 100%;
  box-sizing: border-box;
  padding: 96px 120px 110px;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--cream-50); color: var(--navy-900);
}
.frame.navy { background: var(--navy-900); color: var(--cream-100); }
.frame.deep { background: var(--navy-950); color: var(--cream-100); }

.head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 22px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-600); margin-bottom: 56px;
}
.frame.navy .head, .frame.deep .head { color: var(--teal-400); }
.head .r { color: var(--navy-700); letter-spacing: 0.2em; }
.frame.navy .head .r, .frame.deep .head .r { color: var(--cream-300); }

.foot {
  position: absolute; bottom: 40px; left: 120px; right: 120px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 20px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy-700); opacity: 0.6;
}
.frame.navy .foot, .frame.deep .foot { color: var(--cream-300); }

/* layout helpers */
.col  { display: flex; flex-direction: column; gap: 28px; }
.col.lg { gap: 48px; }
.col.sm { gap: 14px; }
.cols-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; flex: 1; min-height: 0; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; flex: 1; min-height: 0; }
.spread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.hr { height: 1px; background: var(--line-ink); width: 100%; }
.frame.navy .hr, .frame.deep .hr { background: var(--line-cream); }

/* ============================================================
   SWATCHES
   ============================================================ */
.swatches { display: grid; gap: 18px; }
.sw {
  border-radius: 8px; padding: 26px 24px; height: 240px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--mono); font-size: 15px; line-height: 1.5;
}
.sw .nm { font-family: var(--sans); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.sw .cd { display: flex; flex-direction: column; gap: 2px; opacity: 0.78; }

/* ============================================================
   STATIONERY PRIMITIVES (cards / signature / letterhead)
   ============================================================ */
.bizcard {
  width: 525px; height: 300px;          /* 3.5 x 2 in @ 150 */
  border-radius: 10px; box-sizing: border-box;
  padding: 36px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  font-family: var(--sans);
  box-shadow: 0 24px 60px rgba(14,34,64,0.22);
}
.bizcard.cream { background: var(--cream-50); color: var(--navy-900); border: 1px solid var(--cream-300); }
.bizcard.navy  { background: var(--navy-900); color: var(--cream-100); }

.sig {
  background: #fff; color: #1a2433;
  border-left: 4px solid var(--teal-600);
  padding: 26px 30px; display: flex; gap: 24px; align-items: center;
  font-family: var(--sans); border-radius: 0 6px 6px 0;
  box-shadow: 0 14px 36px rgba(14,34,64,0.12);
}