:root {
  --ink: #132a39;
  --paper: #f7f5ef;
  --mist: #9fb3bd;
  --mint: #c3d8cb;
  --line: rgba(247, 245, 239, .14);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gutter: clamp(24px, 6vw, 88px);
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 7vw, 88px);
  background: radial-gradient(circle, rgba(247, 245, 239, .07) 1px, transparent 1.2px) 0 0 / 28px 28px, var(--ink);
  color: var(--paper); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
h1, p, ul { margin: 0; }

.identity { display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 1.35; animation: rise .8s ease-out .2s both; }
.identity strong { font-weight: 600; letter-spacing: -.01em; }
.identity span { color: var(--mist); font-size: 15px; }

.thread { align-self: center; width: calc(100% + var(--gutter)); max-height: 46vh; margin-right: calc(var(--gutter) * -1); overflow: visible; }
#resolved { stroke: none; }
.tangle { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.8s cubic-bezier(.45, 0, .25, 1) .3s both, settle .9s ease-out 3.1s forwards; }
.signal { fill: var(--paper); opacity: 0; }
.thread-still { display: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.node { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.3, 1.4, .5, 1) 3.45s both; }
.node-halo { stroke: var(--mint); stroke-opacity: .25; transform-box: fill-box; transform-origin: center; animation: breathe 4s ease-in-out 4.2s infinite; }
.node-dot { fill: var(--mint); }
.node-check { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw .4s ease-out 3.8s both; }

.intro { max-width: 46rem; animation: rise .9s ease-out .7s both; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.intro p { margin-top: 24px; max-width: 34rem; text-wrap: pretty; color: var(--mist); font-size: clamp(16px, 1.4vw, 18px); }
.contact { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.contact a { display: inline-block; padding-block: 6px; color: var(--paper); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(195, 216, 203, .45); text-underline-offset: 7px; text-decoration-thickness: 1px; transition: text-decoration-color .2s, color .2s; }
.contact a:hover { color: var(--mint); text-decoration-color: var(--mint); }
.email { display: flex; align-items: center; gap: 10px; }
.copy { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--mist); cursor: pointer; transition: color .2s, border-color .2s; }
.copy[hidden] { display: none; }
.copy:hover { color: var(--mint); border-color: rgba(195, 216, 203, .5); }
.copy svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.3; }
.copy-status { color: var(--mint); font-size: 13px; }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes settle { to { stroke: var(--mint); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes breathe { 50% { transform: scale(1.18); stroke-opacity: .08; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .thread { width: 170%; margin-left: -70%; }
  .tangle, .thread-still { stroke-width: 4; }
  .node { scale: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .thread-motion { display: none; }
  .thread-still { display: inline; }
}