/* =====================================================================
   SPIKING GREEN — BRAND DESIGN SYSTEM
   Direction B "The System": precise grotesque + the Float Aperture mark.
   Light & dark are one system. One disciplined accent: muted pine.
   ===================================================================== */

:root {
  /* ---- Accent: a single disciplined pine. Never decoration. ---- */
  --pine:        #2F6F4F;  /* primary accent (on light) */
  --pine-soft:   #5E9C7C;  /* accent on dark backgrounds */
  --pine-deep:   #1C4631;  /* carved detail, pressed states */

  /* ---- Neutrals ---- */
  --ink:         #14171A;  /* primary text on light */
  --graphite:    #3A3F43;  /* secondary text on light */
  --slate:       #6A6F72;  /* tertiary / captions on light */
  --paper:       #F6F5F1;  /* light canvas */
  --paper-2:     #EFEDE6;  /* raised panels on light */
  --hairline:    #E2E0D9;  /* rules on light */

  --night:       #0E1114;  /* dark canvas */
  --night-2:     #161A1E;  /* raised panels on dark */
  --mist:        #C7CEC9;  /* primary text on dark */
  --mist-2:      #8A9690;  /* secondary text on dark */
  --hairline-dk: #232A2E;  /* rules on dark */

  /* ---- Spike accent (for SVG axes wordmark) ---- */
  --spike: var(--pine);        /* on light */

  /* ---- Type ---- */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "STIX Two Text", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }

/* =====================================================================
   THE MARK — Float Aperture (pure CSS, scales from --m)
   ===================================================================== */
.mark {
  --m: 64px;
  position: relative;
  width: var(--m); height: var(--m);
  border-radius: calc(var(--m) * 0.22);
  /* layers, top to bottom: spike · baseline · face. Painted as backgrounds
     so the carve renders reliably everywhere (pseudo-elements were dropping). */
  background:
    linear-gradient(135deg, #0c2617 0%, #163d29 100%),
    linear-gradient(#0f2c1d, #0f2c1d),
    linear-gradient(160deg, #357A59 0%, #274F39 100%);
  background-repeat: no-repeat;
  background-size:
    calc(var(--m) * 0.10) 52%,
    56% calc(var(--m) * 0.04 + 1px),
    100% 100%;
  background-position: 50% 40%, 50% 74%, 50% 50%;
  box-shadow:
    0 calc(var(--m) * 0.16) calc(var(--m) * 0.30) rgba(0,0,0,0.40),
    0 calc(var(--m) * 0.03) calc(var(--m) * 0.05) rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.20);
  flex: none;
}

/* Flat fallback for small sizes (16–32px) & 1-color use.
   Bolder spike, no depth — survives tiny rendering. */
.mark-flat {
  --m: 32px;
  position: relative; width: var(--m); height: var(--m);
  border-radius: calc(var(--m) * 0.22);
  background:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--pine), var(--pine));
  background-repeat: no-repeat;
  background-size:
    calc(var(--m) * 0.14) 52%,
    56% calc(var(--m) * 0.08),
    100% 100%;
  background-position: 50% 40%, 50% 73%, 50% 50%;
  flex: none;
}
.on-dark .mark-flat {
  background:
    linear-gradient(var(--night), var(--night)),
    linear-gradient(var(--night), var(--night)),
    linear-gradient(var(--pine-soft), var(--pine-soft));
  background-repeat: no-repeat;
  background-size:
    calc(var(--m) * 0.14) 52%,
    56% calc(var(--m) * 0.08),
    100% 100%;
  background-position: 50% 40%, 50% 73%, 50% 50%;
}

/* =====================================================================
   LOCKUPS
   ===================================================================== */
.wordmark {
  font-family: var(--sans); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1; color: var(--ink);
}
.tagline {
  font-family: var(--sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.28em; color: var(--slate);
}

/* Primary = symmetrical stack: mark centered above centered wordmark */
.lockup-stack {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
/* Text block: left-aligned lines sharing one left edge,
   block centered under the mark on the vertical axis. */
.lockup-stack > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.lockup-stack .wordmark { font-size: 30px; }
.lockup-stack .tagline { font-size: 10px; margin-top: 0; }

/* Secondary = horizontal, optically balanced */
.lockup-row { display: flex; align-items: center; gap: 18px; }
.lockup-row .wordmark { font-size: 28px; }
.lockup-row .stacktext { display: flex; flex-direction: column; gap: 12px; }
.lockup-row .tagline { font-size: 9px; }

.on-dark .wordmark { color: var(--mist); }
.on-dark .tagline { color: var(--mist-2); }

/* =====================================================================
   PAGE CHROME / SHARED DOC STYLES
   ===================================================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

.sec { padding: 96px 0; border-top: 1px solid var(--hairline); }
.sec:first-of-type { border-top: none; }

.sec-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--pine); text-transform: uppercase; margin: 0 0 18px;
}
.sec-title {
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em;
  font-size: 38px; line-height: 1.05; margin: 0 0 16px; color: var(--ink);
}
.sec-lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  color: var(--graphite); max-width: 60ch; margin: 0 0 8px;
}

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--slate);
}

.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

.panel {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 6px; overflow: hidden;
}
.panel-dark { background: var(--night); border-color: var(--hairline-dk); color: var(--mist); }

.note {
  font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--graphite);
}
.note b { color: var(--ink); font-weight: 600; }

.label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate);
}

@media (max-width: 880px) {
  .wrap { padding: 0 24px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .sec { padding: 64px 0; }
  .sec-title { font-size: 30px; }
}