/* ============================================================
   Prairie Creek Labs — Logo system ("Range")
   Drop-in CSS for the HTML lockup component.
   Pair with the markup shown in LOGO-GUIDE.md (§ Implementation).

   Requires the Archivo webfont. Add to <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  --pcl-ink:          #1C2624;  /* slate ink  — text, back peak, dark grounds */
  --pcl-green:        #2D6A4F;  /* pine green — primary accent, front peak */
  --pcl-green-bright: #4FA97E;  /* bright pine — accent on DARK grounds only */
  --pcl-sky:          #D8E6F2;  /* soft support tone (footer bands) */
  --pcl-paper:        #FFFFFF;
  --pcl-font:         'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Lockup container -------------------------------------- */
/* Scale the whole lockup by setting font-size on .pclLogo.      */
.pclLogo {
  display: inline-flex;
  align-items: flex-end;          /* baseline alignment (horizontal) */
  gap: 0.52em;
  font-family: var(--pcl-font);
  line-height: 1;
}
.pclLogo__peaks {
  width: 2.22em;                  /* apex meets cap line, base meets baseline */
  height: auto;
  display: block;
  overflow: visible;
  margin-bottom: 0.2em;           /* drops the flat base onto the baseline */
  flex: none;
}
.pclLogo__wm { line-height: 1; }
.pclLogo__l1 {
  display: block;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.pclLogo__l2 {
  display: block;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0.02em;         /* normal spacing, left-aligned under "PRAIRIE" */
  line-height: 1;
  white-space: nowrap;
}

/* ---- Colour variants --------------------------------------- */
/* positive (default) — for light/white grounds */
.pclLogo .p-back  { fill: var(--pcl-ink); }
.pclLogo .p-front { fill: var(--pcl-green); }
.pclLogo .pclLogo__l1 { color: var(--pcl-ink); }
.pclLogo .pclLogo__l2 { color: var(--pcl-green); }

/* mono ink — single colour (printing, watermarks) */
.pclLogo--mono .p-front { fill: var(--pcl-ink); }
.pclLogo--mono .pclLogo__l2 { color: var(--pcl-ink); }

/* reversed white — safe fallback over any photography */
.pclLogo--reversed .p-back  { fill: #FFFFFF; fill-opacity: 0.78; }
.pclLogo--reversed .p-front { fill: #FFFFFF; }
.pclLogo--reversed .pclLogo__l1,
.pclLogo--reversed .pclLogo__l2 { color: #FFFFFF; }

/* reversed + pine — PRIMARY treatment over dark photography */
.pclLogo--reversedPine .p-back  { fill: #FFFFFF; fill-opacity: 0.82; }
.pclLogo--reversedPine .p-front { fill: var(--pcl-green-bright); }
.pclLogo--reversedPine .pclLogo__l1 { color: #FFFFFF; }
.pclLogo--reversedPine .pclLogo__l2 { color: var(--pcl-green-bright); }

/* ---- Stacked layout (square spaces) ------------------------ */
.pclLogo--stacked {
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  text-align: center;
}
.pclLogo--stacked .pclLogo__peaks { width: 2.6em; margin-bottom: 0; }
.pclLogo--stacked .pclLogo__l2 { line-height: 1.08; }

/* ============================================================
   Photography contrast scrim
   Put .pclScrim as an absolutely-positioned layer between the
   photo and the (reversed) logo in a masthead/hero.
   ============================================================ */
.pclScrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, rgba(12,16,15,0.62) 0%, rgba(12,16,15,0.30) 38%, rgba(12,16,15,0) 66%),
    linear-gradient(180deg, rgba(12,16,15,0.50) 0%, rgba(12,16,15,0.05) 46%, rgba(12,16,15,0) 62%);
}