/* Vega Blue — layout, sections, components */

/* ── Shell ────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(5rem, 3rem + 9vw, 9.5rem); }

.section--paper {
  background: var(--paper);
  color: var(--on-paper);
}

.section--paper .lede { color: var(--on-paper-dim); }

/* Grain — one shared atmospheric layer over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── Masthead ─────────────────────────────────────────────── */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.masthead.is-stuck {
  background: rgba(5, 9, 15, 0.78);
  border-bottom-color: var(--rule-ink);
  backdrop-filter: saturate(150%) blur(14px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.15rem;
}

/* ── Logo lockup ──────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.logo__mark {
  width: auto;
  height: 2.1rem;
  overflow: visible;
  transition: transform 0.5s var(--ease);
}

.logo:hover .logo__mark { transform: translateY(-2px); }

.logo__word {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.logo__word em {
  font-style: normal;
  font-weight: 300;
  opacity: 0.72;
}

/* ── Navigation ───────────────────────────────────────────── */

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }

.nav__link {
  position: relative;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  transition: color 0.3s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.42s var(--ease);
}

.nav__link:hover { color: var(--on-ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle {
  display: none;
  padding: 0.55rem;
  margin-right: -0.55rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}

.nav__toggle span + span { margin-top: 6px; }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.6rem;
  overflow: hidden;
  border: 1px solid var(--rule-ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink);
  cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn > * { position: relative; z-index: 1; }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, var(--teal-lt), var(--blue-lt));
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

.btn:hover { color: var(--ink); border-color: transparent; }
.btn:hover::before { transform: translateY(0); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn__arrow { transition: transform 0.35s var(--ease); }

.btn--solid {
  background: linear-gradient(100deg, var(--teal-lt), var(--blue-lt));
  border-color: transparent;
  color: var(--ink);
}

.btn--solid::before { background: var(--on-ink); }

.btn--paper { color: var(--on-paper); border-color: var(--rule-paper); }

.btn--lg { padding: 1.1rem 2rem; font-size: 0.78rem; }

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 9rem 4rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__glow {
  position: absolute;
  z-index: -2;
  top: -22%;
  right: -12%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(62, 147, 214, 0.30), rgba(46, 158, 139, 0.13) 42%, transparent 68%);
  filter: blur(12px);
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 4%, 0) scale(1.08); }
}

/* Full-bleed backdrop — abstract texture, not a diagram */
.hero__chart {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
  /* Dropped so the climb clears the headline's descenders */
  transform: translateY(9%);
  transition: opacity 0.9s var(--ease);
}

.hero__chart .star { animation: twinkle 5.5s ease-in-out infinite; }
.hero__chart .star:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.hero__chart .star:nth-of-type(3n) { animation-duration: 9s; animation-delay: -4s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.95; }
}

/* The whole layer fades up together on load. It deliberately does NOT draw the
   stroke on with a dash offset: markers ignore dashing, so the tip arrowhead
   would sit detached at the end of an undrawn line for the duration. Opacity is
   set here rather than on .hero__chart so it can't collide with the hover lift. */
.chart__layer { animation: chart-in 1.5s var(--ease) 0.35s both; }

@keyframes chart-in { from { opacity: 0; } to { opacity: 1; } }

/* The climb morphs shape rather than scaling, so the curve itself changes
   character. Rest is y ∝ 110·t^1.8 — a slow, steady rise. Hover is 230·t^2.2 —
   compounding: each step gains more than the last. The exponents are chosen so
   the hover curve sits at or above the resting one at every point, starting
   level with it and diverging — it never dips below the dashed line. */
.chart__after,
.chart__fill,
.chart__ticks {
  transition: d 1.1s var(--ease), stroke-opacity 1.1s var(--ease);
}

.chart__after {
  d: path("M250 282 L295 277.6 L340 266.8 L385 250.4 L430 229 L475 202.8 L520 172");
}

.chart__fill {
  d: path("M250 282 L295 277.6 L340 266.8 L385 250.4 L430 229 L475 202.8 L520 172 L520 360 L250 360 Z");
}

.chart__ticks {
  d: path("M295 277.6 L295 360 M340 266.8 L340 360 M385 250.4 L385 360 M430 229 L430 360 M475 202.8 L475 360 M520 172 L520 360");
}

.hero.is-lifted .chart__after {
  d: path("M250 282 L295 277.5 L340 261.5 L385 231.9 L430 187.8 L475 128 L520 52");
  stroke-opacity: 0.9;
}

.hero.is-lifted .chart__fill {
  d: path("M250 282 L295 277.5 L340 261.5 L385 231.9 L430 187.8 L475 128 L520 52 L520 360 L250 360 Z");
}

.hero.is-lifted .chart__ticks {
  d: path("M295 277.5 L295 360 M340 261.5 L340 360 M385 231.9 L385 360 M430 187.8 L430 360 M475 128 L475 360 M520 52 L520 360");
}

/* The dashed line never moves — it holds the resting curve. At rest the solid
   line covers it exactly, so it reads as one line; on hover it fades up as the
   solid pulls away, leaving the original trajectory visible underneath. */
.chart__ghost {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.hero.is-lifted .chart__ghost { opacity: 0.42; }

/* Data points ride the curve. cx/cy as CSS so they can tween with the path;
   the cy attribute in the markup is the resting value, used as a fallback. */
.chart__node {
  cy: calc(var(--rest) * 1px);
  transition: cy 1.1s var(--ease);
}

.hero.is-lifted .chart__node { cy: calc(var(--lift) * 1px); }

.chart__nodes { opacity: 0.55; transition: opacity 1.1s var(--ease); }
.hero.is-lifted .chart__nodes { opacity: 0.9; }

/* The tip arrowhead is a marker on the line itself — no state of its own, so it
   is present at rest and simply rides the line as the curve steepens. */

.hero.is-lifted .hero__chart { opacity: 0.55; }

.chart__pulse,
.chart__hinge { transition: opacity 0.9s var(--ease); }

.hero.is-lifted .chart__hinge { opacity: 0.85; }
.hero.is-lifted .chart__pulse { opacity: 0.14; }

.chart__pulse {
  transform-box: view-box;
  transform-origin: 250px 282px;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.05; transform: scale(0.86); }
  50%      { opacity: 0.12; transform: scale(1.1); }
}

.hero__content { max-width: 56rem; }

.hero h1 { margin-block: 1.4rem 1.5rem; }

.hero .lede { max-width: 46ch; }

.hero h1 .accent {
  display: inline-block;
  background: linear-gradient(96deg, var(--teal-lt), var(--blue-lt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  /* h1 runs a 1.02 line-height, so this inline-block's box is shorter than the
     italic glyphs — and background-clip:text clips the gradient to that box,
     lopping the descender off the "g". Pad the box out past the ink extents,
     then pull the layout back with matching negative margins. */
  padding: 0.1em 0.08em 0.22em;
  margin: -0.1em -0.08em -0.22em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 2.25rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}

.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.6rem;
  margin: 0.75rem auto 0;
  background: linear-gradient(var(--on-ink-faint), transparent);
  animation: sink 2.6s var(--ease) infinite;
  transform-origin: top;
}

@keyframes sink {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* ── Ledger (stats band) ──────────────────────────────────── */

.ledger {
  border-block: 1px solid var(--rule-ink);
  background: linear-gradient(180deg, rgba(16, 27, 45, 0.55), transparent);
}

.ledger__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ledger__item {
  padding: clamp(2rem, 1.4rem + 2vw, 3rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--rule-ink);
}

.ledger__item:first-child { border-left: 0; padding-left: 0; }

.ledger__figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(140deg, var(--teal-lt), var(--blue-lt));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ledger__note {
  display: block;
  margin-top: 0.85rem;
  max-width: 18ch;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--on-ink-dim);
}

/* ── Section heading pattern ──────────────────────────────── */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.head__label { margin-bottom: 1.4rem; }

/* ── Approach cards ───────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-paper);
}

.card {
  position: relative;
  padding: clamp(2rem, 1.5rem + 1.6vw, 3rem) clamp(1.5rem, 2.5vw, 2.75rem) clamp(2.5rem, 3vw, 3.5rem);
  border-left: 1px solid var(--rule-paper);
}

.card:first-child { border-left: 0; padding-left: 0; }
.card:last-child { padding-right: 0; }

.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.card:hover::before { transform: scaleX(1); }

.card__index {
  display: block;
  margin-bottom: 1.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--on-paper-faint);
  transition: color 0.4s var(--ease);
}

.card:hover .card__index { color: var(--teal); }

.card h3 { margin-bottom: 0.9rem; }

.card p { color: var(--on-paper-dim); font-size: 0.9375rem; }

/* ── Quote ────────────────────────────────────────────────── */

.quote { position: relative; overflow: hidden; }

.quote__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(52vw, 620px);
  transform: translate(-50%, -50%);
  opacity: 0.045;
  pointer-events: none;
}

.quote__inner { position: relative; z-index: 1; max-width: 54rem; }

.quote blockquote {
  margin: 1.9rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 1.05rem + 2.6vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.quote figcaption {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}

/* ── Profile ──────────────────────────────────────────────── */

.profile {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

.profile__plate {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule-paper);
  background: var(--paper-2);
  overflow: hidden;
}

.profile__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.32) contrast(1.03);
  transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}

.profile__plate:hover .profile__photo {
  filter: none;
  transform: scale(1.03);
}

.profile h2 { margin-bottom: 0.4rem; }

.profile__role {
  margin-bottom: 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-paper-faint);
}

.profile p { color: var(--on-paper-dim); }

.profile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.profile__facts li {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule-paper);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-paper-dim);
}

/* ── Contact ──────────────────────────────────────────────── */

.contact { border-top: 1px solid var(--rule-ink); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact h2 { margin-block: 1.4rem 1.6rem; }

.contact__list { border-top: 1px solid var(--rule-ink); }

.contact__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule-ink);
  transition: padding-inline 0.4s var(--ease);
}

a.contact__row:hover { padding-inline: 0.6rem; }

.contact__key {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}

.contact__val {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  transition: color 0.3s var(--ease);
}

a.contact__row:hover .contact__val { color: var(--blue-lt); }

/* ── Footer ───────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--rule-ink);
  padding-block: 2.5rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer__fine {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-faint);
}

/* ── Reveal choreography ──────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .head,
  .profile,
  .contact__grid { grid-template-columns: 1fr; }

  .profile__plate { max-width: 22rem; }

  .ledger__grid { grid-template-columns: repeat(2, 1fr); }
  .ledger__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger__item:nth-child(n + 3) { border-top: 1px solid var(--rule-ink); }

  .cards { grid-template-columns: 1fr; }
  .card { border-left: 0; padding-inline: 0; border-top: 1px solid var(--rule-paper); }
  .card:first-child { border-top: 0; }
  .card::before { display: none; }
}

@media (max-width: 720px) {
  .nav__toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: var(--gutter);
    background: rgba(5, 9, 15, 0.97);
    backdrop-filter: blur(20px);
    clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
    transition: clip-path 0.6s var(--ease);
  }

  .nav[data-open="true"] { clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem); }

  .nav__link { font-size: 1rem; letter-spacing: 0.12em; }

  /* No room for the chart beside the copy at this width — drop it entirely
     rather than let it sit behind the text */
  .hero__chart { display: none; }
  .hero__scroll { display: none; }
  .logo__word { font-size: 0.8rem; letter-spacing: 0.2em; }
}