/* ============================================================
   THEME · SASQUATCH RESOURCES CORP. (CSE: SASQ)
   Loaded AFTER core.css. Re-skins the entire component
   library by redefining tokens only — olive-green + orange,
   bold grotesque display. No component CSS is duplicated.
   ============================================================ */

:root{
  /* Neutrals — warm stone */
  --paper:#FFFFFF; --paper-2:#F5F6F1; --paper-3:#E9ECE0;
  --ink:#1A1F12; --ink-2:#3F4636; --muted:#6E7563;
  --line:#E5E8DC; --line-2:#CDD3C0;

  /* Brand — Sasquatch olive/forest green */
  --green:#456B23; --green-600:#37571A; --green-deep:#223810; --green-900:#162607; --green-tint:#EDF2E1;

  /* Accent — Sasquatch orange */
  --gold:#D97E26; --gold-deep:#B4641A; --gold-bright:#E89233; --gold-tint:#FBEEDC; --gold-border:#F0D5B0;

  /* On dark brand bands */
  --band-text:#DAE5C9; --band-text-2:#AABE92; --band-mute:#7E9162; --band-accent:#E89233; --band-gold:#F0B468;

  /* Type — bold grotesque display (vs the base serif) */
  --display:"Archivo", "Inter", system-ui, sans-serif;
}

/* recolour the faint topo watermark to the olive brand */
.topo{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='620' viewBox='0 0 1200 620'%3E%3Cg fill='none' stroke='%23456b23' stroke-width='1' opacity='0.12'%3E%3Cpath d='M-40 140 C200 80 380 200 600 150 C820 100 980 220 1240 160'/%3E%3Cpath d='M-40 200 C200 140 380 260 600 210 C820 160 980 280 1240 220'/%3E%3Cpath d='M-40 270 C220 210 400 320 600 275 C820 225 1000 340 1240 290'/%3E%3Cpath d='M-40 350 C220 290 400 400 600 355 C820 305 1000 420 1240 370'/%3E%3Cpath d='M-40 440 C220 380 420 490 620 445 C840 395 1000 500 1240 460'/%3E%3Cpath d='M-40 530 C220 470 420 580 620 535 C840 485 1000 590 1240 550'/%3E%3C/g%3E%3C/svg%3E"); }

/* Archivo is a grotesque — headings want heavier weight + tighter tracking */
.disp-m{ font-weight:700; letter-spacing:-0.02em; }
.disp-l,.disp-xl{ font-weight:700; letter-spacing:-0.025em; }
.disp-xxl{ font-weight:800; letter-spacing:-0.03em; }
.hero h1 em{ font-style:italic; }

/* ---- Real Sasquatch logo + footer treatment ---- */
/* The logo image already contains the wordmark, so hide the template's text lockup. */
.brand .wm{ display:none; }
.brand-logo{ height:54px; width:auto; display:block; }
@media(max-width:560px){ .brand-logo{ height:44px; } }

/* Footer: real logo on a white chip (its wordmark is dark, so it needs a light plate on the dark band) */
.footer .lockup > div{ display:none; }
.brand-logo-chip{ display:inline-block; background:#fff; border-radius:12px; padding:9px 13px; line-height:0; }
.brand-logo-chip img{ height:46px; width:auto; display:block; }

/* Footer background — their real treatment: dark olive + striding-sasquatch silhouette, bottom-right */
.footer{
  background-color:#36422d;
  background-image:url('/img/sasq/unnamed-copy.png');
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:min(820px, 78%) auto;
}