/* ============================================================
   Okey Ukaigwe — v2

   This is v1 exactly as it was, plus two things:
     1. a faint graph-paper grid behind everything
     2. a proper opening: large display name, tagline,
        links row, contact button, margin label

   Everything else — the system font, the spacing, the layout —
   is unchanged from the version you already liked.
   ============================================================ */

:root {
  --bg: #fbf9f5;
  --text: #1a1a18;
  --muted: #6b6b66;
  --rule: #e4e3df;
  --grid: rgba(26, 26, 24, 0.055);
  --accent: #b0442c;
  --accent-2: #9a7215;
  --highlight: #b0442c;
  --measure: 34rem;
  --display: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --text: #ecebe7;
    --muted: #9a9992;
    --rule: #2b2b28;
    --grid: rgba(236, 235, 231, 0.05);
    --accent: #e08b6a;
    --accent-2: #d6ac52;
    --highlight: #e08b6a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.5rem;
  background-color: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* the grid: 34px squares, hairline weight */
  background-image:
    repeating-linear-gradient(to right,  var(--grid) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 34px);
  background-attachment: fixed;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 0 6rem;
  position: relative;
}

/* ---------- margin label ---------- */

.wrap::before {
  content: "GROWTH & GO-TO-MARKET";
  position: absolute;
  left: -3.25rem;
  top: 14rem;
  writing-mode: vertical-rl;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  opacity: 0.8;
}

@media (max-width: 52rem) { .wrap::before { display: none; } }

/* ---------- header ---------- */

header { margin-bottom: 3.5rem; }

.name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.name a { color: var(--text); text-decoration: none; }

nav { display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; margin-left: -0.55rem; }

nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* padding does two jobs: a real tap target, and room for the hover tint */
  padding: 0.5rem 0.55rem;
  border-radius: 3px;
  line-height: 1;
}

nav a:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.name a:hover { color: var(--accent); }

/* the page you are on gets an underline, so the nav says where you are */
nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ---------- the opening ---------- */

.hero { margin: 0 0 3.5rem; }

.hero-name {
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.hero-name .dot { color: var(--accent); }

/* the one-line "what I do", with the three domains picked out */
.hero-tagline {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  color: var(--muted);
}

.hero-tagline .mark { color: var(--accent); margin-right: 0.35rem; }
.hero-tagline .t1 { color: var(--accent);   font-weight: 600; }
.hero-tagline .t2 { color: var(--text);     font-weight: 600; }
.hero-tagline .t3 { color: var(--accent-2); font-weight: 600; }

@media (max-width: 34rem) { .hero-tagline { font-size: 1.06rem; } }

.hero-line {
  font-size: 1.12rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 30rem;
}

.hero-links { margin: 0 0 1.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-links a { color: var(--muted); text-decoration: none; margin-right: 1.1rem; }
.hero-links a:hover { color: var(--accent); }

.button {
  display: inline-block;
  border: 1px solid var(--text);
  padding: 0.55rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}

.button:hover { border-color: var(--accent); color: var(--accent); }

.button.ghost { border-color: var(--rule); color: var(--muted); }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }

/* ---------- type ---------- */

h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 650; margin: 0 0 1.5rem; }
h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 3rem 0 1rem; }

p { margin: 0 0 1.25rem; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
strong { font-weight: 650; }

.lead { font-size: 1.2rem; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.95rem; }

.section-note {
  display: inline-block;
  border: 1px solid var(--rule);
  padding: 0.3rem 0.7rem;
  margin: -0.75rem 0 2rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}

/* ---------- proof list ---------- */

.proof { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.proof li { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.proof li:last-child { border-bottom: 1px solid var(--rule); }

.proof .where {
  display: block; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem;
}
.proof .what { margin: 0; }

/* ---------- beliefs ---------- */

.beliefs { list-style: none; padding: 0; margin: 0; counter-reset: b; }
.beliefs li { counter-increment: b; padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.beliefs li:last-child { border-bottom: 1px solid var(--rule); }
.beliefs li::before {
  content: counter(b, decimal-leading-zero);
  display: block; font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 0.5rem;
}
.beliefs .claim { font-weight: 650; display: block; margin-bottom: 0.4rem; }
.beliefs p { margin: 0; color: var(--muted); }

/* ---------- writing index: cards ---------- */

/* horizontal strip; cards run off the right edge to signal there is more */
.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15rem;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 1.25rem;
  margin: 2rem 0 0;
  /* let the strip bleed past the text column */
  width: calc(100% + 6rem);
  max-width: 100vw;
}

.cards::-webkit-scrollbar { height: 6px; }
.cards::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 12.5rem;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
}

.card .kicker {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 0.6rem;
}

.card .headline {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

.card .headline a { color: var(--text); text-decoration: none; }
.card .headline a:hover { color: var(--accent); }

.card .read {
  margin: auto 0 0;
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 34rem) {
  .cards { grid-auto-columns: 13rem; width: calc(100% + 2.5rem); }
}

/* ---------- writing index: list (unused, kept for reference) ---------- */

.posts { list-style: none; padding: 0; margin: 2rem 0 0; }
.posts li { padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
.posts .date {
  display: block; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem;
}
.posts a { text-decoration: none; font-weight: 550; }
.posts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.posts .blurb { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.95rem; }

.subscribe { margin: 3.5rem 0 0; padding: 2rem 1.5rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); text-align: center; }
.subscribe p { margin: 0 0 1.1rem; }
.subscribe iframe { width: 100%; border: 0; background: transparent; display: block; }

/* ---------- praise wall ---------- */

/* masonry-ish columns so screenshots of different heights sit tightly */
.praise {
  columns: 2;
  column-gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.praise > li {
  break-inside: avoid;
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}

.praise img { width: 100%; height: auto; display: block; }

.praise .said {
  padding: 1.1rem 1.1rem 0.35rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

.praise .who {
  padding: 0 1.1rem 1.1rem;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.praise .src {
  padding: 0.8rem 1.1rem 1.1rem;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

@media (max-width: 40rem) { .praise { columns: 1; } }

/* ---------- images ---------- */

.portrait { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 1.75rem; background: var(--rule); }

figure { margin: 2.25rem 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 4px; background: var(--rule); }
figure.tall img { max-width: 23rem; margin-left: auto; margin-right: auto; }
figure.tall figcaption { text-align: center; }
figcaption { margin-top: 0.65rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pair img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ---------- footer ---------- */

footer { margin-top: 4.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.95rem; }
footer a { color: var(--muted); }

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  body { padding: 0 1.25rem; font-size: 16px; background-size: 26px 26px, 26px 26px; }
  .wrap { padding: 2.5rem 0 4rem; }
  h1 { font-size: 1.5rem; }
  .lead { font-size: 1.1rem; }
  nav a { margin-right: 0.8rem; font-size: 0.68rem; }
  .pair { grid-template-columns: 1fr; }
  .portrait { width: 4.5rem; height: 4.5rem; }
}


/* ============================================================
   MOTION
   All CSS, no JavaScript. Three kinds:
     1. the opening animates in, staggered, once on load
     2. things you can click respond when you touch them
     3. sections ease in as they scroll into view

   Anyone who has "reduce motion" switched on in their OS gets
   none of it — the block at the bottom turns it all off.
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 1. the opening, staggered ---- */

.hero .portrait,
.hero-name,
.hero-tagline,
.hero-links,
.hero .button {
  animation: rise 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero .portrait  { animation-delay: 0.00s; }
.hero-name       { animation-delay: 0.06s; }
.hero-tagline    { animation-delay: 0.14s; }
.hero-links      { animation-delay: 0.22s; }
.hero .button    { animation-delay: 0.30s; }

/* the three domains arrive one after another */
.hero-tagline .mark,
.hero-tagline .t1,
.hero-tagline .t2,
.hero-tagline .t3 {
  display: inline-block;
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero-tagline .mark { animation-delay: 0.26s; }
.hero-tagline .t1   { animation-delay: 0.34s; }
.hero-tagline .t2   { animation-delay: 0.44s; }
.hero-tagline .t3   { animation-delay: 0.54s; }

/* ---- 2. things you can click ---- */

.button,
.card,
nav a,
.hero-links a,
.proof li,
figure img {
  transition: transform 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.button:hover      { transform: translateY(-2px); }
.hero-links a:hover{ transform: translateX(2px); }
.card:hover        { transform: translateY(-3px); border-color: var(--accent); }
.praise > li       { transition: transform 0.18s ease, border-color 0.18s ease; }
.praise > li:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ---- 3. sections ease in as you scroll to them ---- */
/* Uses CSS scroll-driven animation. Browsers without it simply
   show everything straight away, which is a fine fallback. */

/* PARKED — scroll reveals. Delete the two lines marked OFF to
   switch them back on. Kept here because they worked; we are
   testing the page without them.

OFF
@supports (animation-timeline: view()) {
  .proof li,
  .beliefs li,
  figure,
  .cards,
  h2,
  .subscribe {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
}
OFF */

/* ---- respect the reader's setting ---- */

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


/* ---- the one thing that never stops ----
   A slow breath on the dot before the tagline, like a live
   indicator. Deliberately the only looping motion on the site.
   To remove: delete this block. */

@keyframes breathe {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

.hero-tagline .mark {
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both,
             breathe 3.2s ease-in-out 1.2s infinite;
}