/* ============================================================================
   Greene IS — discovery.greeneis.com
   Official palette only. No invented tints; hierarchy comes from size, weight
   and space. Charcoal ground because this is read on a screen.

     Charcoal      #1E1C23   ground, primary dark field
     Greene        #384A38   structural cards and panels
     Orange        #C77700   emphasis ONLY - never on the green field
     Tan           #FBE3C8   muted type on dark, secondary callouts
     Dark Purple   #231F2D   secondary surfaces
     White         #FFFFFF   primary type on dark

   Type: Lora (headlines, sentence case) / Fjalla One (eyebrows, ALL CAPS,
   14px+ with letter-spacing so the caps breathe) / Poppins Medium (body).
   ========================================================================= */

:root {
  --charcoal:    #1E1C23;
  --greene:      #384A38;
  --orange:      #C77700;
  --tan:         #FBE3C8;
  --purple:      #231F2D;
  --white:       #FFFFFF;

  --f-head:  'Lora', Georgia, 'Times New Roman', serif;
  --f-label: 'Fjalla One', 'Arial Narrow', Impact, sans-serif;
  --f-body:  'Poppins Medium', 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;   /* the horizon is positioned against the document, not the viewport */
  margin: 0;
  min-height: 100vh;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* --- the mountain watermark ------------------------------------------------
   Low horizon: bottom edge, bleeding off both sides, 91% transparent. Only the
   base of the range shows, and the content column stops short of it so no card
   ever slices through the peaks. Drawn immediately after the background. */
.horizon {
  /* ABSOLUTE, not fixed. A viewport-fixed watermark is crossed by every card as
     the page scrolls, which is exactly what the standard forbids - "positioned
     so cards and content blocks never slice through the peaks". Anchored to the
     document bottom instead, it lives in the clear zone below the last panel
     and nothing ever passes over it. */
  position: absolute;
  /* Pinned to the viewport edges, NOT wider than them. A 130%-wide element
     overflows the document and produces a horizontal scrollbar - html
     overflow-x:hidden does not reliably clip it, and reaching for that only
     hides the next overflow bug. The bleed comes from background-size below:
     the image is wider than this element and the element clips it. */
  left: 0;
  right: 0;
  bottom: 0;
  /* A fixed-height band, NOT the image's full aspect ratio. The mark is
     1179x497 and sized by width, so its rendered height far exceeds this band -
     anchoring it to the bottom clips the top and leaves only the base of the
     range showing, which is what keeps content blocks from cutting the peaks.
     The image is never stretched: background-size sets width and leaves height
     auto, so the 2.3722:1 ratio holds. */
  height: clamp(150px, 22vh, 210px);
  background: url('mountain-white.png') no-repeat bottom center;
  background-size: 130% auto;   /* wider than the element, so the range bleeds off both edges */
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* --- draft mark ------------------------------------------------------------
   REMOVE THIS BLOCK AND THE <div class="draft-mark"> IN EACH PAGE ONCE THE
   COPY HAS CLEARED HUMAN REVIEW. Those are the only two edits needed. */
.draft-mark {
  position: relative;
  z-index: 2;
  background: var(--orange);
  color: var(--charcoal);
  font-family: var(--f-label);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 9px 16px;
}

/* --- shell ---------------------------------------------------------------- */
.shell {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px 260px;   /* > horizon band height, so no panel ever cuts the peaks */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.logo {
  /* 1183x1163 -> 1.0172:1. Nearly square, but NOT square: forcing 1:1 squashes
     it visibly. Held above ~72px because the full lockup becomes an illegible
     smudge below that - use the mountain mark instead if it ever needs to go
     smaller. */
  width: 88px;
  height: auto;
  display: block;
}

/* --- headline block ------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-label);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 18px;
}
.eyebrow.attention { color: var(--orange); }

h1 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(30px, 5.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: balance;
  color: var(--white);
}

.lede { font-size: 18px; margin: 0 0 16px; max-width: 62ch; }
p { margin: 0 0 16px; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--tan); }

/* --- structural panel ----------------------------------------------------- */
.panel {
  background: var(--greene);
  border-radius: 4px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel.secondary { background: var(--purple); }

h2 {
  font-family: var(--f-label);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0;
}

.panel ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.panel li { max-width: 62ch; }
.panel li strong { color: var(--white); font-weight: 700; }

/* Tenant / diagnostic readout. Reflected from the URL, so it is always set
   with textContent - never innerHTML. */
.readout {
  margin-top: 18px;
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: 14px;
  color: var(--tan);
  overflow-wrap: anywhere;
}

/* --- links and the single CTA --------------------------------------------- */
a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--tan); }
a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.cta {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
}

/* --- footer --------------------------------------------------------------- */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(251, 227, 200, 0.18);
  padding: 22px 28px 30px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  font-size: 13px;
  color: var(--tan);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
footer a { font-weight: 500; font-size: 13px; }

@media (max-width: 560px) {
  .shell { padding: 40px 20px 210px; gap: 32px; }
  .panel { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}