/* maxi.css — aubergine ground, electric amber accent, serif display */

:root {
  --m-bg:     oklch(0.18 0.08 320);
  --m-bg-2:   oklch(0.22 0.07 320);
  --m-ink:    oklch(0.96 0.02 95);
  --m-mute:   oklch(0.78 0.04 320);
  --m-accent: oklch(0.78 0.20 75);
  --m-rule:   oklch(0.34 0.06 320);
}

body {
  background: var(--m-bg);
  color: var(--m-ink);
}

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  text-align: center;
  isolation: isolate;
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
}
.hero canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.85;
  mask-image: radial-gradient(circle at center, black 30%, transparent 78%);
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin-bottom: var(--space-2);
  opacity: 0;
  animation: fadein 900ms var(--ease-out-expo) 200ms forwards;
}
.hero__name {
  font-family: var(--font-display);
  font-size: clamp(var(--type-8), 9vw, var(--type-11));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  opacity: 0;
  animation: rise 1100ms var(--ease-out-expo) 300ms forwards;
}
.hero__role {
  font-size: var(--type-5);
  font-weight: 400;
  color: var(--m-mute);
  margin-top: var(--space-2);
  opacity: 0;
  animation: rise 1100ms var(--ease-out-expo) 450ms forwards;
}
.hero__scroll {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--type-1); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--m-mute);
  opacity: 0;
  animation: fadein 900ms var(--ease-out-expo) 1200ms forwards, nudge 2.5s ease-in-out 2s infinite;
}

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-5);
  position: relative;
}
.section__num {
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin-bottom: var(--space-3);
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(var(--type-7), 5.5vw, var(--type-9));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
.section__lead {
  font-size: var(--type-4);
  max-width: 60ch;
  color: var(--m-mute);
  margin-bottom: var(--space-4);
}

.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-4);
  list-style: none;
  padding: 0; margin: 0;
}
.stack li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--m-rule);
}
.stack li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--m-accent);
  border-radius: 999px;
  align-self: center;
  grid-column: 1;
}
.stack li b {
  font-family: var(--font-mono);
  font-size: var(--type-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stack li span { color: var(--m-mute); font-size: var(--type-3); grid-column: 2; }
.stack li b { grid-column: 2; }
.stack li::before { grid-row: span 2; }

/* Shipped — intentionally asymmetric, NOT identical card grid */
.shipped {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.shipped article {
  background: var(--m-bg-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 500ms var(--ease-out-quart);
}
.shipped article:hover { transform: translateY(-4px); }
.shipped article::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--m-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 600ms var(--ease-out-expo);
}
.shipped article:hover::before { transform: scaleX(1); }
.shipped article h3 { font-family: var(--font-display); font-size: var(--type-5); font-weight: 700; margin: 0 0 var(--space-1); }
.shipped article p { color: var(--m-mute); margin: 0 0 var(--space-2); }
.shipped article .tags { font-family: var(--font-mono); font-size: var(--type-1); letter-spacing: 0.06em; color: var(--m-accent); text-transform: uppercase; }
.shipped article a { color: var(--m-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.shipped .a-big   { grid-column: span 7; min-height: 280px; }
.shipped .a-tall  { grid-column: span 5; min-height: 280px; }
.shipped .a-wide  { grid-column: span 8; }
.shipped .a-small { grid-column: span 4; }
.shipped .a-full  { grid-column: span 12; }
@media (max-width: 720px) {
  .shipped > * { grid-column: span 12 !important; }
}

.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-3);
  margin-top: var(--space-3);
}
.contacts a {
  text-decoration: none;
  border-bottom: 1px solid var(--m-rule);
  padding-bottom: 2px;
  transition: border-color 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart);
}
.contacts a:hover { border-bottom-color: var(--m-accent); color: var(--m-accent); }
.contacts a small { display: block; font-size: var(--type-1); color: var(--m-mute); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 2px; }

footer.foot {
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m-mute);
}
footer.foot a { color: var(--m-accent); text-decoration: none; }

.section__subtitle {
  font-family: var(--font-display);
  font-size: var(--type-6);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-3);
}

/* ── About / Story prose ─────────────────────────────────────── */
.prose {
  max-width: 64ch;
  font-size: var(--type-4);
  line-height: 1.65;
  color: var(--m-ink);
}
.prose p { margin: 0 0 var(--space-3); }
.prose p:first-of-type::first-line { font-weight: 600; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.9;
  float: left;
  margin: 0.08em 0.12em -0.06em 0;
  color: var(--m-accent);
}

/* ── Case Study layout ───────────────────────────────────────── */
.case {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) { .case { grid-template-columns: 1fr; gap: var(--space-4); } }
.case__rail {
  position: sticky; top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-mute);
  display: grid;
  gap: var(--space-2);
}
.case__rail b { color: var(--m-accent); font-weight: 700; letter-spacing: 0.18em; }
.case__rail .meta { display: grid; gap: 0.3em; padding: var(--space-2) 0; border-top: 1px solid var(--m-rule); }
.case__rail .meta dt { color: var(--m-mute); }
.case__rail .meta dd { color: var(--m-ink); margin: 0; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--type-3); }
.case__body h3 {
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: var(--space-4) 0 var(--space-2);
}
.case__body h3:first-of-type { margin-top: 0; }
.case__body p { font-size: var(--type-4); line-height: 1.65; margin: 0 0 var(--space-2); color: var(--m-ink); }
.case__pull {
  margin: var(--space-4) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--m-accent);
  font-family: var(--font-display);
  font-size: var(--type-6);
  line-height: 1.25;
  font-weight: 700;
  color: var(--m-ink);
  letter-spacing: -0.01em;
}
.case__pull cite { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-style: normal; font-size: var(--type-1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-mute); }
.case__lesson {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--m-bg-2);
  border: 1px solid var(--m-rule);
  font-family: var(--font-mono);
  font-size: var(--type-2);
  line-height: 1.6;
  color: var(--m-ink);
}
.case__lesson b { color: var(--m-accent); display: block; font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-1); }
.case__metrics { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.case__metrics li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--type-3);
}
.case__metrics li::before {
  content: "→";
  color: var(--m-accent);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ── Opinions: editorial pull-quotes ─────────────────────────── */
.opinions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  list-style: none; padding: 0; margin: 0;
}
.opinions li {
  font-family: var(--font-display);
  font-size: var(--type-5);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--m-rule);
  position: relative;
}
.opinions li::before {
  content: "“";
  position: absolute;
  top: var(--space-1); left: -0.2em;
  color: var(--m-accent);
  font-size: 2.5em;
  line-height: 1;
  opacity: 0.5;
}
.opinions li span { color: var(--m-accent); }

/* ── First 2 hours — numbered step list ──────────────────────── */
.steps { list-style: none; padding: 0; margin: var(--space-3) 0 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--m-rule);
  align-items: baseline;
  font-size: var(--type-3);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--type-2);
  letter-spacing: 0.08em;
  color: var(--m-accent);
  font-weight: 700;
}

/* ── Anti-list (what I don't take on) ────────────────────────── */
.antilist { list-style: none; padding: 0; margin: 0; }
.antilist li {
  font-size: var(--type-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--m-rule);
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: var(--space-2);
  align-items: baseline;
}
.antilist li::before {
  content: "✕";
  color: oklch(0.55 0.20 30);
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
}

/* ── Availability card (NOT hero-metric template) ────────────── */
.availability {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.availability > div {
  border-top: 1px solid var(--m-accent);
  padding-top: var(--space-2);
}
.availability dt {
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-mute);
  margin-bottom: var(--space-1);
}
.availability dd { margin: 0; font-size: var(--type-4); line-height: 1.45; color: var(--m-ink); }
.availability dd b { color: var(--m-accent); font-weight: 700; }

/* ── References citation list ────────────────────────────────── */
.refs {
  list-style: none; padding: 0; margin: var(--space-3) 0 0;
  display: grid; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-2);
}
.refs li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2);
  align-items: baseline;
}
.refs li b { color: var(--m-accent); font-weight: 700; }
.refs li span { color: var(--m-mute); }

/* ── References / chips for languages/education ──────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.chips li {
  font-family: var(--font-mono);
  font-size: var(--type-2);
  letter-spacing: 0.04em;
  padding: 0.45em 0.9em;
  border: 1px solid var(--m-rule);
  color: var(--m-ink);
}
.chips li b { color: var(--m-accent); font-weight: 700; }

@keyframes fadein { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(12px); } }
@keyframes nudge { 50% { transform: translateX(-50%) translateY(6px); } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: translateY(0); }