/* ============================================================
   Ubuntu LTD — Brand Tokens v1.0
   Drop this into any project and reference via CSS variables.
   Source of truth: index.html (Brand Guidelines v2)
   ============================================================ */

:root {
  /* --- Surface & ink (load-bearing 80%) --- */
  --paper:        #ebdfc4;  /* aged savannah cream — body background */
  --paper-pure:   #f5ecd6;  /* alt off-white for cards/surfaces */
  --ink:          #161210;  /* near-black, warm — body type */
  --ink-soft:     #3a2d22;  /* secondary type, captions */
  --rule:         #1f1612;  /* hairlines, dividers */

  /* --- Anchor (dark backgrounds, cover, footer) --- */
  --navy:         #1f1612;  /* deep umber — kept the token name for drop-in compatibility */
  --navy-deep:    #120b07;
  --navy-soft:    #3a2a1e;

  /* --- Accent — savannah gold --- */
  --gold:         #d4a04a;  /* the sun */
  --gold-warm:    #e0ad53;
  --gold-cool:    #b8893a;
  --gold-tint:    #ecd49a;  /* used for ::selection and gold washes */

  /* --- Extended earth palette (staff colours) --- */
  --terra:        #a14a23;  /* fired earth */
  --terra-deep:   #6e2e12;
  --soil:         #6e4524;  /* deep loam */
  --soil-warm:    #8a5a32;  /* warm clay */
  --umber:        #4a2d18;  /* burnt umber */
  --moss:         #4a4e2b;  /* moss / vegetation */
  --stone:        #cdc1a8;
  --stone-2:      #b39a78;
  --stone-3:      #8a6f50;

  /* --- Ceremonial — use sparingly --- */
  --sea:          #2d5266;  /* water, rare */
  --sea-deep:     #1a3848;
  --sea-pale:     #9fb6c0;
  --royal:        #3d3a8c;  /* ceremony only */
  --royal-deep:   #28266a;
  --purple:       #5c3a6e;  /* signature program colour, sparing */
  --purple-deep:  #3d2553;
  --purple-pale:  #a890b0;

  /* --- Layout --- */
  --maxw: 1280px;
  --pad:  48px;
}

/* ============================================================
   Typography
   ============================================================ */

/* Load fonts — required for wordmark and body to render correctly */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

html, body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","ss02","ss03";
}

::selection { background: var(--gold-tint); color: var(--ink); }

/* Display scale */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  font-family: 'Newsreader', serif;
  letter-spacing: -.01em;
}
h1 { font-size: 88px; line-height: .95;  letter-spacing: -.025em; font-weight: 300; }
h2 { font-size: 56px; line-height: 1.02; letter-spacing: -.02em;  font-weight: 400; }
h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.01em; font-weight: 400; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 500; }

/* Support type */
.mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mono-sm  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.num      { font-feature-settings: "tnum","lnum"; font-variant-numeric: tabular-nums; }
.lead     { font-size: 24px; line-height: 1.45; max-width: 48ch; font-weight: 300; }
.body-col { max-width: 62ch; }
.small    { font-size: 14px; color: var(--ink-soft); }

/* ============================================================
   Wordmark — stacked, sturdy, no italics
   Usage:
     <span class="wm">
       <span>Ubuntu</span>
       <span class="b">Land Trust &amp; Developments</span>
     </span>
   Size is controlled by setting font-size on the .wm element
   (e.g., style="font-size:96px" for the cover, 14px for a footer).
   ============================================================ */
.wm {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .92;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .22em;
}
.wm > span:first-child { font-weight: 500; font-style: normal; }
.wm .b {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 500;
  font-size: .22em;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Hide the descriptor on tiny uses (≤14px) */
.wm[style*="font-size:14px"] .b,
.wm[style*="font-size:13px"] .b { display: none; }

/* ============================================================
   Pills & labels
   ============================================================ */
.pill {
  display: inline-block;
  padding: 4px 10px;
  border: .5px solid var(--rule);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.pill.gold   { border-color: var(--gold); color: var(--gold); }
.pill.on-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* ============================================================
   12-column shell + grid helpers
   ============================================================ */
.shell  { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.grid-6  { display: grid; grid-template-columns: repeat(6, 1fr);  gap: 16px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 24px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 24px; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr;          gap: 32px; }
.row     { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }