@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
:root{
  --bg:#FAFAF7;
  --fg:#111111;
  --muted:#6e6d68;
  --rule:#e7e6e0;
  --accent: oklch(0.62 0.17 32);
  --display: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
}
canvas#stage{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;
  touch-action: none;
}
main{
  position:fixed;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
  padding: clamp(24px, 4vw, 56px);
}
.name{
  font-family:var(--display);
  font-weight:400;
  font-size: clamp(56px, 12.6vw, 224px);
  line-height:.9;
  letter-spacing:-.01em;
  text-align:center;
  pointer-events:auto;
  position:relative;
  mix-blend-mode: multiply;
}
html.dark .name, html.ink .name{ mix-blend-mode: screen; }

/* Hidden easter egg: click the tittle of the "i" in "Julian" to open the DQD
   visualizer. On hover the tittle becomes the left site of a Double Quantum
   Dot — a hairline tunneling link draws out to the right and a second dot
   materializes at its end, schematic-physics style. */
.i-letter{ position: relative; }
.i-dot{
  position:absolute;
  top:.22em; left:50%;
  width:.36em; height:.3em;
  transform:translateX(-50%);
  color:inherit; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dqd-glyph{
  position:absolute;
  top:.105em;
  left:calc(50% - .05em);
  width:.3em;
  height:.3em;
  overflow:visible;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity .18s ease;
}
.dqd-glyph line{
  stroke:var(--accent);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .4s cubic-bezier(.2,.7,.1,1);
}
.dqd-glyph circle{
  fill:var(--accent);
  transform-origin:25px 5px;
  transform:scale(0);
  transition:transform .28s cubic-bezier(.2,.7,.1,1);
}
.i-letter:hover .dqd-glyph{ opacity:1; }
.i-letter:hover .dqd-glyph line{ stroke-dashoffset:0; }
.i-letter:hover .dqd-glyph circle{
  transform:scale(1);
  transition-delay:.22s;
}

.tagline{
  margin-top: 18px;
  font-family:var(--mono);
  font-size: 13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  pointer-events:auto;
  text-align:center;
}
.corners{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  padding: clamp(20px, 3vw, 40px);
  font-family:var(--mono);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
}
.corner{position:absolute;display:flex;gap:14px;align-items:center;pointer-events:auto;}
.corner.tl{top: clamp(20px,3vw,40px); left: clamp(20px,3vw,40px); min-height:30px;}
.loc-full, .loc-short{ display:inline-flex; gap:18px; align-items:flex-start; }
.city{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; line-height:1.1; }
.off{ color:var(--muted); font-size:max(9px,.82em); font-variant-numeric: tabular-nums; letter-spacing:.04em; }
.corner.tr{top: clamp(20px,3vw,40px); right: clamp(20px,3vw,40px); gap:18px; min-height:30px;}
.corner.bl{bottom: clamp(20px,3vw,40px); left: clamp(20px,3vw,40px); flex-direction:column; align-items:flex-start; gap:6px;}
.corner.br{bottom: clamp(20px,3vw,40px); right: clamp(20px,3vw,40px); flex-direction:column; align-items:flex-end; gap:6px;}
.corner a{
  color:inherit;text-decoration:none;position:relative;padding-bottom:2px;
  transition: color .25s ease;
}
.corner a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.1,1);
}
.corner a:hover::after,
.corner a:focus-visible::after{transform:scaleX(1);}
.corner a:hover,
.corner a:focus-visible{color:var(--accent);}
.corner a:focus-visible{outline:none;}
.corner .hint{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--fg);
  opacity:.35;
  margin-bottom:4px;
  pointer-events:none;
  user-select:none;
}
#privacyLink{
  color:var(--muted);
  font-size:10px;
  opacity:.7;
}
#privacyLink:hover, #privacyLink:focus-visible{
  opacity:1;
}
/* Dark mode */
html.dark{--bg:#0B0B0C;--fg:#EDECE6;--muted:#918f89;--rule:#1c1c1e;}
html.cream{--bg:#F3EEE2;--fg:#1a1a17;--muted:#5d5849;--rule:#e1d9c7;}
html.paper{--bg:#FAFAF7;--fg:#111111;--muted:#6e6d68;--rule:#e7e6e0;}
html.ink{--bg:#0B0B0C;--fg:#EDECE6;--muted:#918f89;--rule:#1c1c1e;--accent:oklch(0.78 0.15 75);}

/* icon buttons (theme toggle, mail) */
.icon-btn{
  pointer-events:auto;background:transparent;border:1px solid var(--rule);
  width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--fg);padding:0;text-decoration:none;
  transition: border-color .2s ease, transform .2s ease, color .2s ease, background-color .2s ease;
}
.icon-btn:hover{ border-color: var(--fg); }
.icon-btn:focus-visible{ border-color: var(--fg); outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn svg{ width:14px;height:14px; display:block;}

.theme-toggle:hover{ transform: rotate(30deg); }

/* mail button: envelope "opens" on hover */
.mail-btn{ position:relative; overflow:hidden; }
.mail-btn:hover{ color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.mail-btn .flap{
  transform-origin: 50% 30%;
  transition: transform .35s cubic-bezier(.2,.7,.1,1);
}
.mail-btn:hover .flap,
.mail-btn:focus-visible .flap{ transform: rotateX(170deg); }
.mail-btn::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--accent);
  opacity:0;transform:scale(.6);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.1,1);
  pointer-events:none;
}
.mail-btn:hover::before{ opacity:.55; transform:scale(1.35); }

.loc-short{ display:none; }
@media (max-width: 560px){
  .corner.tr, .corner.tl{font-size:10px;}
  .corner.br, .corner.bl{font-size:10px;}
  .corner.tr{ gap:12px; }
  .loc-full{ display:none; }
  .loc-short{ display:inline-flex; }
  .tagline,
  .corner.bl .hint,
  .corner.br{ display:none; }
}
@media (max-width: 420px){
  .name{ font-size: clamp(40px, 13vw, 64px); }
}

/* Click-the-tittle page transition: expanding circle reveal from the dot. */
.dqd-sweep{
  position:fixed;
  width:2px; height:2px;
  border-radius:50%;
  background:var(--fg);
  z-index:50;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .58s cubic-bezier(.3,.7,.1,1);
  will-change:transform;
}