/* Chaos Over — websites-v3 shared tokens (soft/cream theme, In-the-Wild Web Hero look) */
:root {
  --ink: #1c1822;          /* warm charcoal */
  --ink-soft: rgba(28,24,34,0.65);
  --ink-dim: rgba(28,24,34,0.45);
  --bone: #f4eee2;         /* cream ground (slightly warmer than #f9f3ea) */
  --bone-2: #ede5d4;
  --lime: #c8ff3d;
  --line: rgba(28,24,34,0.14);
  --line-strong: rgba(28,24,34,0.22);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* Type */
.display { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: 0.84; letter-spacing: -0.02em; }
.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.22em; text-transform: uppercase; font-size: 11px; }

/* Locked wordmark (matches the live tweak saved in the brand canvas) */
.co-wordmark { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: 0.84; letter-spacing: -0.02em; color: var(--ink); }
.co-wordmark .strike-line { position: relative; display: inline-block; }
.co-wordmark .strike-line::after {
  content: ''; position: absolute; left: -6%; right: -6%; top: 72%;
  height: 0.04em; background: var(--lime);
  -webkit-transform: translateY(-50%) rotate(-39deg);
  transform: translateY(-50%) rotate(-39deg);
  -webkit-transform-origin: center;
  transform-origin: center;
}
.co-wordmark .dot { color: var(--lime); }

/* Lime fill highlight */
.lime-fill {
  background: linear-gradient(
    to bottom,
    transparent 0%, transparent 16%,
    var(--lime) 16%, var(--lime) 92%,
    transparent 92%, transparent 100%
  );
  color: var(--ink); padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Mono eyebrow tag, lime-fill style */
.eyebrow-tag {
  display: inline-block; background: var(--lime); color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 9px;
}

/* Dark + lime card pair */
.card-ink, .card-lime {
  padding: 22px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;
  min-height: 220px;
}
.card-ink { background: var(--ink); color: var(--bone); }
.card-ink .meta { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; }
.card-ink h4 { font-family: 'Big Shoulders Display'; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; line-height: 0.95; }
.card-lime { background: var(--lime); color: var(--ink); }
.card-lime .meta { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; }
.card-lime h4 { font-family: 'Big Shoulders Display'; font-weight: 900; font-size: 30px; letter-spacing: -0.02em; line-height: 0.95; }

/* CTA buttons */
.btn {
  display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  -webkit-transition: -webkit-transform .2s, background .2s, color .2s, border-color .2s;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--lime); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 12.5px 20.5px; }
.btn-outline:hover { background: var(--ink); color: var(--bone); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }

/* Reveal */
[data-reveal] { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: opacity 1.1s cubic-bezier(.2,.7,.3,1), -webkit-transform 1.1s cubic-bezier(.2,.7,.3,1); transition: opacity 1.1s cubic-bezier(.2,.7,.3,1), transform 1.1s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
[data-reveal-delay="1"] { -webkit-transition-delay: .08s; transition-delay: .08s; }
[data-reveal-delay="2"] { -webkit-transition-delay: .16s; transition-delay: .16s; }
[data-reveal-delay="3"] { -webkit-transition-delay: .24s; transition-delay: .24s; }
[data-reveal-delay="4"] { -webkit-transition-delay: .32s; transition-delay: .32s; }

/* Top meta strip */
.meta-strip {
  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center;
  padding: 14px 40px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); background: transparent;
}
.meta-strip .lime-dot { color: var(--lime); -webkit-text-stroke: 0.6px var(--ink); }

/* Footer */
footer.foot {
  padding: 28px 40px; border-top: 1px solid var(--line);
  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Standard container */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }