/* Eigenfold — the fold (eigen-line)
   Ported from the 1440x900 artboard prototype; values preserved, frame made fluid. */

:root {
  --bg:        #F7F6F2;
  --ink:       #2A2A2E;
  --ink-hover: #000000;
  --muted:     #6E6E75;

  --sans:  'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'EB Garamond', Georgia, serif;

  /* 120px / 64px insets at the 1440x900 reference size */
  --inset-x: clamp(24px, 8.33vw, 120px);
  --inset-y: clamp(28px, 7.11vh, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--ink-hover); }

.serif { font-family: var(--serif); font-weight: 400; }

/* ---------- atmosphere ---------- */

/* Fixed and clipped, so the blobs and the lattice can overhang the viewport
   without ever extending the document or creating a scrollbar. */
.atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.f1 {
  width: 83.33vw; height: 100vh;
  left: -13.89vw; top: -33.33vh;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 65%);
}

.f2 {
  width: 69.44vw; height: 88.89vh;
  left: 48.61vw; top: 33.33vh;
  background: radial-gradient(circle, rgba(232,230,223,.9) 0%, rgba(232,230,223,0) 65%);
}

.moving .f1 { animation: f1 90s ease-in-out infinite alternate; }
.moving .f2 { animation: f2 110s ease-in-out infinite alternate; }

@keyframes f1 { from { transform: translate(0, 0); } to { transform: translate(220px, 140px); } }
@keyframes f2 { from { transform: translate(0, 0); } to { transform: translate(-260px, -180px); } }

.eigenline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- entrance ---------- */

.rise { opacity: 0; animation: rise 3.2s ease-out forwards; }
.r0 { animation-duration: 6s; }
.r1 { animation-delay: .2s; }
.r2 { animation-delay: 1s; }
.r3 { animation-delay: 1.8s; }
.r4 { animation-delay: 2.6s; }

@keyframes rise { to { opacity: 1; } }

/* ---------- content ---------- */

.hero {
  position: absolute;
  z-index: 1;
  left: var(--inset-x);
  top: 42.2%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(440px, calc(100vw - var(--inset-x) * 2));
}

.hero h1 {
  font-size: clamp(30px, 2.78vw, 44px);
  line-height: 1.15;
  letter-spacing: -.005em;
}

.hero h1 em { font-style: italic; }

.lede {
  font-size: clamp(14px, 1.04vw, 16px);
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- call to action ---------- */

.cta {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.contact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

/* The address is plain text, not a link: a mailto: only helps the subset of
   visitors with a mail client wired up, and silently fails for the rest. */
.contact-email {
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid rgba(42, 42, 46, .25);
  padding-bottom: 3px;
  user-select: all;
  overflow-wrap: anywhere;
}

.contact-copy {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0 0 3px;
  cursor: pointer;
  transition: color .3s ease;
}

.contact-copy:hover { color: var(--ink-hover); }
.contact-copy:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.contact-copy.is-done { color: var(--ink); }

/* Without JS there is nothing to click; the address is already selectable. */
.no-js .contact-copy { display: none; }

/* ---------- narrow viewports ---------- */

@media (max-width: 900px) {
  .eigenline { opacity: .5; }
}

@media (max-width: 640px) {
  /* the fold sits behind the copy here, so it steps further back */
  .eigenline { opacity: .35; }

  .hero {
    position: static;
    min-height: 100vh;
    justify-content: center;
    margin-inline: var(--inset-x);
    padding-block: calc(var(--inset-y) * 2.5);
    width: auto;
  }

  .f1 { width: 140vw; left: -30vw; }
  .f2 { width: 130vw; left: 10vw; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .moving .f1, .moving .f2 { animation: none; }
  .rise { animation: none; opacity: 1; }
  .contact-copy { transition: none; }
}