/* wurch.dev — shared foundation for both hosts: self-hosted fonts, the
   near-black/violet world, and a bare reset. Page-specific layout lives in
   felipe.css (the chat at felipe.wurch.dev) and index.css (the wurch.dev
   landing). Zero third-party requests: every font below ships from here. */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 700;font-stretch:75% 112.5%;font-display:swap;src:url(/assets/fonts/martianmono-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 700;font-stretch:75% 112.5%;font-display:swap;src:url(/assets/fonts/martianmono-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light dark;

  /* Domain-transition timing — tunable at runtime by /wurch-dev.js in dev
     builds (see route-transition.js). */
  --route-cover-dur:1.46s;
  --route-reveal-dur:1.08s;
  --route-primer-dur:.18s;
  --route-readout-in-dur:.96s;
  --route-readout-out-dur:.92s;
  --route-prefix-in-dur:1.62s;
  --route-prefix-in-delay:.54s;
  --route-prefix-out-dur:.6s;
  --route-prefix-out-delay:.1s;
  --route-packet-dur:.45s;

  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --surface-soft:#F1F0EC;
  --border:rgba(10,10,15,.10);
  --border-strong:rgba(10,10,15,.16);
  --ink:#14151A;
  --ink-soft:#6B6D76;
  --ink-faint:#9A9CA6;
  --accent:#6E56CF;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(110,86,207,.12);
  --shadow:rgba(20,15,40,.10);

  --font-display:Archivo,'Helvetica Neue',Arial,sans-serif;
  --font-body:Archivo,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0C0F;
    --surface:#17181D;
    --surface-soft:#1D1F26;
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.14);
    --ink:#F2F1EC;
    --ink-soft:#9A9CA6;
    --ink-faint:#6B6D76;
    --accent:#8B7CFF;
    --accent-ink:#0B0C0F;
    --accent-soft:rgba(139,124,255,.16);
    --shadow:rgba(0,0,0,.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}

.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}

::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* A pill link: the landing's email/profile row, and every outbound link
   inside a chat answer on felipe.wurch.dev. One shape, both hosts. */
.link-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:999px;
  background:var(--surface-soft);border:1px solid var(--border);
  font-size:.84rem;font-weight:600;text-decoration:none;
  min-height:38px;
}
.link-btn:hover{border-color:var(--border-strong)}
.link-btn.is-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* Cross-host handoff. The same accent field covers the document swap, while
   the hostname itself shows the relationship between the apex and profile. */
.route-arriving body > :not(.route-transition){visibility:hidden}
.route-transition{
  --route-x:50vw;
  --route-y:50vh;
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--accent);
  color:var(--accent-ink);
  clip-path:circle(0 at var(--route-x) var(--route-y));
  pointer-events:none;
  contain:strict;
}
.route-transition.is-covering{
  animation:route-cover var(--route-cover-dur) cubic-bezier(.16,1,.3,1) both;
}
.route-transition.is-arrival{
  clip-path:circle(150vmax at var(--route-x) var(--route-y));
  animation:route-reveal var(--route-reveal-dur) .02s cubic-bezier(.16,1,.3,1) both;
}
.route-transition.is-primer{opacity:.001;will-change:clip-path}
.route-transition.is-primer.is-primer-active{animation:route-prime var(--route-primer-dur) linear both}
.route-transition__readout{
  width:min(84vw,920px);
  display:grid;
  justify-items:center;
  gap:clamp(14px,2.4vh,24px);
  text-align:center;
}
.route-transition.is-covering .route-transition__readout{animation:route-readout-in var(--route-readout-in-dur) .06s cubic-bezier(.16,1,.3,1) both}
.route-transition.is-arrival .route-transition__readout{animation:route-readout-out var(--route-readout-out-dur) .04s ease-in both}
.route-transition__status,
.route-transition__route{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
}
.route-transition__host{
  max-width:none;
  font-family:var(--font-display);
  font-size:clamp(2.35rem,9vw,6rem);
  font-stretch:112%;
  font-weight:800;
  line-height:.9;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.route-transition__prefix{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  vertical-align:bottom;
  opacity:0;
}
.route-transition[data-direction="to-profile"]:not(.is-arrival) .route-transition__prefix{
  animation:route-prefix-in var(--route-prefix-in-dur) var(--route-prefix-in-delay) cubic-bezier(.16,1,.3,1) both;
}
.route-transition[data-direction="to-home"]:not(.is-arrival) .route-transition__prefix{
  max-width:5em;
  opacity:1;
  animation:route-prefix-out var(--route-prefix-out-dur) var(--route-prefix-out-delay) cubic-bezier(.7,0,.84,0) both;
}
.route-transition[data-direction="to-profile"].is-arrival .route-transition__prefix{
  max-width:5em;
  opacity:1;
}
.route-transition__track{
  position:relative;
  width:min(68vw,520px);
  height:1px;
  background:color-mix(in srgb,var(--accent-ink) 32%,transparent);
}
.route-transition__track::before,
.route-transition__track::after{
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border:1px solid currentColor;
  border-radius:50%;
  transform:translateY(-50%);
}
.route-transition__track::before{left:-3px}
.route-transition__track::after{right:-3px}
.route-transition__packet{
  position:absolute;
  top:-2px;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 18px 4px color-mix(in srgb,var(--accent-ink) 48%,transparent);
  animation:route-packet var(--route-packet-dur) .04s cubic-bezier(.65,0,.35,1) both;
}
.route-transition[data-direction="to-home"] .route-transition__packet{
  left:auto;
  right:0;
  animation-name:route-packet-back;
}

@keyframes route-cover{
  from{clip-path:circle(0 at var(--route-x) var(--route-y))}
  to{clip-path:circle(150vmax at var(--route-x) var(--route-y))}
}
@keyframes route-reveal{
  from{clip-path:circle(150vmax at var(--route-x) var(--route-y))}
  to{clip-path:circle(0 at var(--route-x) var(--route-y))}
}
@keyframes route-prime{
  from{clip-path:circle(0 at var(--route-x) var(--route-y))}
  to{clip-path:circle(150vmax at var(--route-x) var(--route-y))}
}
@keyframes route-prefix-in{
  from{max-width:0;opacity:0;transform:translateX(.3em)}
  to{max-width:5em;opacity:1;transform:translateX(0)}
}
@keyframes route-prefix-out{
  from{max-width:5em;opacity:1;transform:translateX(0)}
  to{max-width:0;opacity:0;transform:translateX(.3em)}
}
@keyframes route-readout-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes route-readout-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}
@keyframes route-packet{from{transform:translateX(0)}to{transform:translateX(calc(min(68vw,520px) - 5px))}}
@keyframes route-packet-back{from{transform:translateX(0)}to{transform:translateX(calc((min(68vw,520px) - 5px) * -1))}}

@media (prefers-reduced-motion:reduce){
  .route-transition.is-covering{animation:route-fade-in .12s ease-out both}
  .route-transition.is-arrival{animation:route-fade-out .16s ease-out both}
  .route-transition__prefix{animation:none!important}
  .route-transition__readout{animation:none!important}
  .route-transition[data-direction="to-profile"] .route-transition__prefix{max-width:5em;opacity:1}
  .route-transition[data-direction="to-home"] .route-transition__prefix{max-width:0;opacity:0}
  .route-transition__packet{animation:none}
}
@keyframes route-fade-in{from{clip-path:none;opacity:0}to{clip-path:none;opacity:1}}
@keyframes route-fade-out{from{clip-path:none;opacity:1}to{clip-path:none;opacity:0}}