/* TradeLoft Base Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette: ink + brass on warm ivory */
  --tl-ink: #15171c;
  --tl-ink-2: #22252d;
  --tl-ink-3: #343842;
  --tl-brass: #a8834a;
  --tl-brass-dark: #8a6a37;
  --tl-brass-deep: #6f5428;
  --tl-champagne: #d8c29a;
  --tl-champagne-soft: #efe4cf;
  --tl-ivory: #f8f5ef;
  --tl-paper: #ffffff;
  --tl-sage: #4f6b5c;

  --color-success: #2f7a55;
  --color-error: #b3412f;
  --color-warning: #b7791f;

  --text-primary: var(--tl-ink);
  --text-secondary: #555a66;
  --text-muted: #6b6f7a;
  --text-inverse: #ffffff;

  --bg-primary: var(--tl-paper);
  --bg-secondary: var(--tl-ivory);
  --bg-tertiary: #f0ebe1;
  --bg-overlay: rgba(21, 23, 28, 0.62);

  --border-color: #e4ddd0;
  --border-color-hover: #cfc4b1;
  --border-color-focus: var(--tl-brass);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(21, 23, 28, 0.06);
  --shadow-md: 0 6px 16px -6px rgba(21, 23, 28, 0.16);
  --shadow-lg: 0 18px 40px -16px rgba(21, 23, 28, 0.28);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --z-sticky: 1020;
  --z-modal: 1050;

  --container: 1200px;
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(168, 131, 74, 0.18); }

body {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 7vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 5vw, 2.6rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; }
p { color: var(--text-secondary); }

a { color: var(--tl-brass-dark); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--tl-ink); }

img, svg { max-width: 100%; display: block; }

ul { list-style: none; }

.tl-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .tl-container { padding: 0 var(--space-8); } }

.tl-eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tl-brass-dark);
}
/* Lighter brass only on dark grounds (AA on ink) */
.tl-hero .tl-eyebrow, .tl-section--ink .tl-eyebrow, .tl-cta .tl-eyebrow,
.tl-page-header .tl-eyebrow, .tl-footer .tl-eyebrow, .tl-card--ink .tl-eyebrow { color: var(--tl-brass); }

.tl-section { padding: var(--space-16) 0; }
@media (min-width: 768px) { .tl-section { padding: var(--space-20) 0; } }
.tl-section--ivory { background: var(--bg-secondary); }
.tl-section--ink { background: var(--tl-ink); }
.tl-section--ink h2, .tl-section--ink h3 { color: #fff; }
.tl-section--ink p { color: #b9bcc5; }

.tl-section-head { max-width: 680px; margin: 0 auto var(--space-10); text-align: center; }
.tl-section-head h2 { margin: var(--space-2) 0 var(--space-3); }

.hidden { display: none !important; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

:focus-visible { outline: 2px solid var(--tl-brass); outline-offset: 2px; }

/* Skip link (visible on keyboard focus) */
.tl-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--tl-champagne); color: var(--tl-ink); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.tl-skip:focus { top: 12px; }
main:focus { outline: none; }

/* Inline SVG icons (Font Awesome Free 6.5.2 paths, CC BY 4.0) — sized by font-size like the icon font */
.tl-icon { display: inline-block; height: 1em; width: 1.15em; vertical-align: -0.125em; fill: currentColor; overflow: visible; flex: none; }
.tl-icon-spin { animation: tlIconSpin 0.9s linear infinite; }
@keyframes tlIconSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-icon-spin { animation-duration: 2.4s; } }

/* Suppress transitions until the page has loaded (html.tl-preload is added by an
   inline <head> script and removed after window load). Without this, browsers can
   animate from first-style defaults (e.g. the UA link colour) to the real styles,
   which shows up as a colour flash on the logo, links and buttons on every load. */
.tl-preload *, .tl-preload *::before, .tl-preload *::after { transition: none !important; }