/* ============================================================
   InspireMarks — Influencer Marketing Agency
   Brutalist editorial system. Warm paper, heavy grotesque ink.
   ============================================================ */

:root {
  /* palette */
  --paper:      #efece3;
  --paper-2:    #e7e3d7;
  --ink:        #16130d;
  --ink-soft:   rgba(22, 19, 13, 0.62);
  --ink-faint:  rgba(22, 19, 13, 0.38);
  --rule:       rgba(22, 19, 13, 0.16);
  --rule-strong:rgba(22, 19, 13, 0.85);
  --card:       #f6f4ec;
  --accent:     #e23a2e;        /* tweakable */
  --accent-ink: #ffffff;        /* text on accent */

  /* type */
  --display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* metrics */
  --gutter: clamp(20px, 4.5vw, 84px);
  --maxw: 1640px;
  --header-h: 46px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }

/* ---------- running header ---------- */
.runhead {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.runhead .mark { display: flex; align-items: center; gap: 10px; }
.runhead .logo-glyph { width: 16px; height: 16px; }
.runhead nav { display: flex; gap: clamp(14px, 2vw, 34px); }
.runhead nav a { color: var(--ink-soft); transition: color .25s; }
.runhead nav a:hover { color: var(--ink); }
.runhead nav a:hover .dot { opacity: 1; }
.runhead nav a .dot {
  display: inline-block; width: 5px; height: 5px; margin-right: 6px;
  background: var(--accent); opacity: 0; transition: opacity .25s;
  transform: translateY(-1px);
}
.runhead .tag { color: var(--ink-soft); }
@media (max-width: 880px) { .runhead nav { display: none; } }

/* ---------- section scaffold ---------- */
.section { padding: clamp(72px, 9vw, 150px) 0; position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 30px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--accent);
  transform: rotate(45deg); flex: none;
}

/* big display heading */
.h-mega {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.h-section {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 9vw, 158px);
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.lead {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: var(--ink);
  max-width: 62ch;
}
.lead .hl { background: var(--accent); color: var(--accent-ink); padding: 0 .18em; }
.muted { color: var(--ink-soft); }

/* divider rule with footer tag (echo of deck) */
.band-foot {
  display: flex; justify-content: flex-end;
  border-top: 1px solid var(--rule);
  margin-top: clamp(48px, 7vw, 110px);
  padding-top: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* static: no scroll-reveal motion */
.reveal { opacity: 1; transform: none; }

/* ---------- placeholder media ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(22,19,13,0.05) 0 9px, rgba(22,19,13,0.0) 9px 18px),
    var(--paper-2);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.ph.on-dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.08) 0 9px, rgba(255,255,255,0.0) 9px 18px),
    rgba(255,255,255,0.10);
}
.ph .ph-label {
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.06em;
  font-weight: 600;
  padding: 8px 9px; color: var(--ink-faint);
  font-feature-settings: "tnum";
}
.ph.on-dark .ph-label { color: rgba(255,255,255,0.6); }
.ph.reel { aspect-ratio: 9 / 16; }
.ph.sq { aspect-ratio: 1 / 1; }