/* ── Reset & Base ────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* --bg: #f5f2ec; */
  --bg: ##f6f6f6;
  --bg-soft: #eeeae1;
  --ink: #0b0a0d;
  --ink-2: #1c1b20;
  --ink-85: rgba(11, 10, 13, 0.85);
  --ink-60: rgba(11, 10, 13, 0.6);
  --ink-50: rgba(11, 10, 13, 0.5);
  --ink-40: rgba(11, 10, 13, 0.4);
  --ink-25: rgba(11, 10, 13, 0.25);
  --ink-10: rgba(11, 10, 13, 0.1);
  --rule: rgba(11, 10, 13, 0.12);
  --tint: rgba(11, 10, 13, 0.035);
  --tint-border: rgba(11, 10, 13, 0.1);

  --past: #8a7a63;
  --current: #141218;
  --future: #3a6472;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

@font-face {
  font-family: "Axiforma";
  src: local("Axiforma");
  font-display: swap;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: "Axiforma", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The hero canvas is oversize and positioned with negative offsets to
     fit long spikes; clip horizontal overflow so it doesn't add a
     sideways scrollbar. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-110%);
  background: var(--ink);
  color: var(--bg);
  padding: 0.5rem 0.875rem;
  border-radius: 0 0 6px 0;
  z-index: 100;
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Header ─────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.2vw, 1.5rem) var(--gutter);
  z-index: 20;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  transition: opacity 200ms var(--ease-out);
}

.logo img {
  width: 38px;
  height: 38px;
}

.logo:hover {
  opacity: 0.72;
}

.thoughts-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: 0.4rem 0.1rem;
  font-weight: 500;
  transition: color 260ms var(--ease-out);
}

.thoughts-link__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-25);
  box-shadow: 0 0 0 0 var(--ink-10);
  animation: subtlePulse 3.2s var(--ease-in-out) infinite;
}

@keyframes subtlePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--ink-10);
    opacity: 0.55;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(11, 10, 13, 0);
    opacity: 1;
  }
}

.thoughts-link:hover,
.thoughts-link:focus-visible,
.thoughts-link.is-current {
  color: var(--ink);
}

.thoughts-link:hover .thoughts-link__dot,
.thoughts-link.is-current .thoughts-link__dot {
  background: var(--ink);
}

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

.hero {
  position: relative;
  z-index: 0; /* Creates a stacking context so the canvas + stage +
                 tagline stack together, with .contact (z:2) above. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(5rem, 10vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  /* Canvas is a child here and intentionally extends beyond .hero on
     every side so long spikes aren't clipped — so NO overflow: hidden. */
}

.hero__stage {
  position: relative;
  z-index: 1;
  width: min(100%, 880px);
  aspect-ratio: 1 / 1;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

/* Canvas is a direct child of .hero, absolutely positioned. JS sets
   its size (square, 1.5x stageShortSide) and places it centered on the
   stage each resize, so the shader has room to render spikes that
   extend past the stage's 1.0 radius. */
.hero__canvas {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.hero__portrait-wrap {
  position: relative;
  width: clamp(220px, 38%, 360px);
  aspect-ratio: 3 / 4;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 10px 30px rgba(11, 10, 13, 0.08));
}

.hero__portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  user-select: none;
  pointer-events: none;
}

.hero__nodes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Each node is a zero-size anchor positioned at the dot's center. The
   dot and label are absolutely positioned relative to that anchor, so
   the label can sit to the left or right of the dot without ever
   crossing inside the ring. */
.node {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--node-text, var(--ink));
  will-change: transform;
}

/* Fade-in (and per-category opacity like "past") is applied to the dot
   and label only — never the .node wrapper — so the popup's own alpha
   isn't multiplied down through a translucent ancestor. */
.node__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--node-dot, var(--ink));
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.node.is-visible .node__dot,
.node.is-visible .node__label {
  opacity: 1;
}

.node__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--node-ring, var(--ink-10));
  animation: nodePulse 3.4s var(--ease-in-out) infinite;
}

@keyframes nodePulse {
  0%,
  100% {
    transform: scale(0.75);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.node__label {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

/* Label anchors to the dot's outer side relative to the circle. JS
   toggles these based on sign(cos(angle)). The ~11px gap clears the dot
   plus its pulse ring. */
.node--right .node__label {
  left: 14px;
  text-align: left;
}

.node--left .node__label {
  right: 14px;
  text-align: right;
}

/* Dot, label, and popup are the interactive surfaces inside the
   otherwise pointer-transparent .hero__nodes container. */
.node__dot,
.node__label,
.node__popup {
  pointer-events: auto;
  cursor: pointer !important;
}

/* Lift the hovered (or tap-opened) node above its siblings so its popup
   paints on top of the other dots/labels, not behind them. */
.node:hover,
.node.is-open {
  z-index: 10;
}

/* ── Company hover popup ──────────────────────────────────────────── */
.node__popup {
  position: absolute;
  top: 18px;
  width: 280px;
  max-width: min(280px, 80vw);
  padding: 0.95rem 1rem 1rem;
  background: rgba(11, 10, 13, 0.82);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(11, 10, 13, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 200ms;
  z-index: 1;
}

.node:hover .node__popup,
.node.is-open .node__popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s;
}

/* Side-aware alignment: open on the same side the label lives on so
   nothing reaches back toward the ring. */
.node--right .node__popup {
  left: 0;
}

.node--left .node__popup {
  right: 0;
}

/* Flipped upward when there's no room below the dot. */
.node--popup-above .node__popup {
  top: auto;
  bottom: 18px;
  transform: translateY(-4px);
}

.node--popup-above:hover .node__popup,
.node--popup-above.is-open .node__popup {
  transform: translateY(0);
}

/* When the card links out, the whole surface is clickable. */
.node__popup--linked {
  cursor: pointer;
}

.node__popup-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
  padding-right: 1.6rem; /* room for the link icon in the corner */
}

.node__popup-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.node__popup-logo img {
  display: block;
  max-height: 22px;
  max-width: 84px;
  width: auto;
  height: auto;
}

.node__popup-logo--white {
  background: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  height: auto;
}

.node__popup-logo--white img {
  max-height: 18px;
}

.node__popup-company {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.2;
}

.node__popup-became {
  margin: 0.1rem 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.node__popup-description {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.node__popup-link {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: color 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.node__popup-link:hover,
.node__popup-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.node__popup-link svg {
  display: block;
}

.node--past {
  --node-text: var(--past);
  --node-dot: var(--past);
  --node-ring: rgba(138, 122, 99, 0.55);
}

/* Past gets the muted look on the dot + label only so the popup still
   renders at full alpha. */
.node--past.is-visible .node__dot,
.node--past.is-visible .node__label {
  opacity: 0.78;
}

.node--past .node__label {
  font-weight: 400;
}

.node--current {
  --node-text: var(--current);
  --node-dot: var(--current);
  --node-ring: rgba(20, 18, 24, 0.4);
}

.node--future {
  --node-text: var(--future);
  --node-dot: var(--future);
  --node-ring: rgba(58, 100, 114, 0.5);
  font-weight: 500;
  letter-spacing: 0.2em;
}

.node--future .node__dot {
  background: transparent;
  border: 1px solid var(--future);
}

.hero__tagline {
  position: relative;
  z-index: 5;
  /* margin: clamp(1.25rem, 3vh, 2rem) 0 0; */
  margin: clamp(0.625rem, 1.5vh, 1rem) 0 0;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.hero__tagline-item {
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.hero__sep {
  color: var(--ink-40);
  font-weight: 300;
  margin: 0 0.4rem;
  font-size: 0.9rem;
}

.hero__scroll-cue {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  animation: cueBob 3.2s var(--ease-in-out) infinite;
}

@keyframes cueBob {
  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.55;
  }
  50% {
    transform: translate(-50%, 6px);
    opacity: 1;
  }
}

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

.contact {
  position: relative;
  z-index: 2;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-inner {
  max-width: 600px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Linear particle band pinned to the bottom of #contact. JS measures
   where the submit button lands and sets this canvas's height so spikes
   top out just below it. */
.contact__canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.contact h1,
.contact h2,
.thoughts h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  color: var(--ink);
}

.contact-lead {
  color: var(--ink-60);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.contact-alt {
  color: var(--ink-40);
  font-size: 0.85rem;
  margin-bottom: 2.5rem;
}

.contact-alt a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s ease;
  border-bottom: 1px solid var(--ink-25);
}

.contact-alt a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ── Forms (stablechaos layout, adapted for white bg) ─ */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 520px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-40);
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--ink-25);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 10, 13, 0.06);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--ink-50);
  margin: -0.25rem 0 1.25rem;
}

.form-status {
  font-size: 0.85rem;
  color: var(--ink-60);
  margin-top: 0.85rem;
  min-height: 1.2em;
}

.form-status.is-error {
  color: #b4583a;
}

.form-status.is-success {
  color: #3a6472;
}

.submit-button {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  border: none;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--ink) 0%, #2a2530 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button:hover {
  box-shadow: 0 10px 30px rgba(11, 10, 13, 0.18);
  transform: translateY(-1px);
}

.submit-button:active {
  transform: translateY(0);
}

.submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.link-button {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.25rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.link-button:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-25);
}

/* ── Thoughts page ──────────────────────────────────── */

.thoughts-main {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) 4rem;
}

.thoughts {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Linear particle band pinned to the bottom of the thoughts page. JS
   measures the active panel's submit button and sizes this canvas to
   2x the contact-equivalent height so swells rise about twice as high. */
.thoughts__canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.thoughts .contact-inner {
  max-width: 440px;
}

.thoughts h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.thoughts__panels {
  position: relative;
}

.thoughts__panel {
  display: none;
  animation: panelFadeIn 420ms var(--ease-out);
}

.thoughts__panel.is-active {
  display: block;
}

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

.thoughts .submit-button {
  width: 100%;
  text-align: center;
}

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

.site-footer {
  padding: 2rem var(--gutter);
  text-align: center;
  color: var(--ink-40);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
}

.site-footer p {
  margin: 0;
}

/* ── Focus ──────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.submit-button:focus-visible {
  outline: none;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(11, 10, 13, 0.12);
}

.submit-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(11, 10, 13, 0.18);
}

/* ── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Small screens ──────────────────────────────────── */

@media (max-width: 640px) {
  .hero {
    padding-top: 5rem;
  }

  .hero__stage {
    aspect-ratio: 1 / 1.1;
  }

  /* Portrait is pulled in to sit inside the shrunken node ring (the ring
     radius is scaled down in JS so dots + labels stay on-screen). */
  .hero__portrait-wrap {
    width: 42%;
  }

  .node {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  /* Cap the label width so long names wrap to a couple of lines instead
     of running off the side of the screen. */
  .node__label {
    max-width: 84px;
    white-space: normal;
    line-height: 1.15;
  }
}

@media (max-width: 380px) {
  .hero__portrait-wrap {
    width: 38%;
  }

  .node {
    font-size: 0.54rem;
  }

  .node__label {
    max-width: 64px;
  }

  .hero__tagline {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  .hero__scroll-cue {
    display: none;
  }

  .form-group input,
  .form-group textarea {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
  }

  .submit-button {
    padding: 0.85rem 2rem;
    font-size: 0.8rem;
    width: 100%;
  }
}