/* ─────────────────────────────────────────────────────────────────────
   Georgia Museum of Art — shared brand stylesheet
   Fonts + colors per "Simple Branding in Canva" guide. This file lives at
   the project root; @font-face url()s below are resolved relative to
   THIS file's location, so every page can link it the same way
   regardless of how deep that page sits (./brand.css or ../brand.css).
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('./assets/fonts/Aktiv_Grotesk_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('./assets/fonts/Aktiv_Grotesk_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('./assets/fonts/Aktiv_Grotesk_SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Georgia Facet Display';
  src: url('./assets/fonts/GeorgiaFacet-Display.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary (confirmed -- matches the official UGA/GMOA red already in
     use across the site) */
  --gma-red: #BA0C2F;
  --gma-black: #000000;
  --gma-white: #FFFFFF;

  /* Secondary -- ESTIMATED from the brand guide's visual swatches, since
     no hex/CMYK values were printed there. Replace these four with exact
     values if you have them from the original Canva brand kit. */
  --gma-yellow: #E8B923;
  --gma-magenta: #D6006D;
  --gma-purple: #342E42;
  --gma-crimson: #D81159;
}

/* Brand guide rule #1: no centered type, left-aligned only. */
.gma-page {
  font-family: 'Aktiv Grotesk', -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em; /* guide rule #3: slight negative tracking on Aktiv Grotesk */
  text-align: left;
}

.gma-heading {
  font-family: 'Georgia Facet Display', 'Aktiv Grotesk', sans-serif;
  font-weight: 400;
  text-align: left;
}

.gma-logo {
  display: block;
  height: 94px; /* another 40% larger than the previous 67px */
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* The logo is a dark mark (#231f20); invert it to white for use on the
   site's dark background. */
.gma-logo.on-dark {
  filter: invert(1);
}

/* Faint grayscale building-photo stencil behind the page. Apply
   .gma-stencil-bg to <body>; give your actual content wrapper
   position: relative; z-index: 1; so it sits above the stencil. */
.gma-stencil-bg {
  position: relative;
}

.gma-stencil-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('./assets/gmoa-building.jpg');
  background-size: cover;
  background-position: 70% 35%;
  filter: grayscale(100%);
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}