/* Geist (variable, latin) — self-hosted, OFL-1.1 */
@font-face { font-family:"Geist"; src:url("fonts/geist.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; 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; }

:root {
  --bg:#09090b; --panel:rgba(255,255,255,.025); --panel-hover:rgba(255,255,255,.045);
  --text:#fafafa; --muted:#a1a1aa; --faint:#52525b; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font:14px/1.6 "Geist",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
/* Keyboard focus: a soft ring that follows each element's own radius */
a:focus { outline:none; }
a:focus-visible { outline:1.5px solid rgba(255,255,255,.6); outline-offset:3px; }
.org:focus-visible, .socials a:focus-visible { border-color:var(--line-strong); background:var(--panel-hover); color:var(--text); }
::selection { background:var(--text); color:var(--bg); }

/* Dot grid that fades out from the top */
.grid-bg { position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 45% at 50% 0%, #000 30%, transparent 100%); }

/* main grows so the footer sits at the bottom on short pages */
main { flex:1; width:100%; position:relative; z-index:1; max-width:680px; margin:0 auto; padding:9rem 1.5rem 4rem; }

h1 { font-size:clamp(2.2rem,6vw,3rem); font-weight:500; letter-spacing:-0.035em; line-height:1.1; }
.lede { color:var(--muted); font-size:1.05rem; max-width:52ch; margin-top:1.1rem; }
.bio { max-width:58ch; }
.bio .lede { color:var(--text); margin-bottom:1rem; }
.bio p:not(.lede) { color:var(--muted); font-size:.98rem; line-height:1.75; margin-bottom:.85rem; }

/* Inline company / school mention: logo + name in a subtle chip */
.org { color:var(--text); white-space:nowrap; padding:.05em .45em .05em .2em; margin-left:.1em; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.035); transition:border-color .2s, background .2s; }
.org img { display:inline-block; width:1.1em; height:1.1em; margin-right:.35em; vertical-align:-0.2em; padding:1.5px; border-radius:4px; background:#fff; object-fit:contain; }
.org img.snug { padding:1px; }
.socials { display:flex; gap:.5rem; margin-top:1.75rem; flex-wrap:wrap; }
.socials a { display:inline-flex; align-items:center; gap:.45rem; font-size:13px; color:var(--muted); padding:.4rem .75rem; border:1px solid var(--line); border-radius:8px; background:var(--panel); transition:all .2s var(--ease); }
.socials svg { width:14px; height:14px; fill:currentColor; }
/* Email copy confirmation: envelope → check, plus a brief tooltip */
.socials a.copied { color:var(--text); }
.ico { position:relative; width:14px; height:14px; display:inline-block; }
.ico svg { position:absolute; inset:0; transition:opacity .2s, transform .25s var(--ease); }
.socials svg.check { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6) rotate(-20deg); }
.email.copied .mail { opacity:0; transform:scale(.6); }
.email.copied .check { opacity:1; transform:none; }
.email { position:relative; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.email::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%, 4px); white-space:nowrap;
  font-size:12px; color:var(--text); background:#18181b; border:1px solid var(--line-strong); border-radius:7px; padding:.3rem .55rem;
  box-shadow:0 8px 24px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s var(--ease); }
.email.copied::after { opacity:1; transform:translate(-50%, 0); }

/* Page load: blocks rise in one after another (set --i on each block) */
@keyframes in { to { opacity:1; filter:none; transform:none; } }
.enter { opacity:0; transform:translateY(10px); filter:blur(6px); animation:in .9s var(--ease) forwards; animation-delay:calc(120ms + var(--i, 0) * 90ms); }
.grid-bg { animation:fade-in 1.6s ease both; }
@keyframes fade-in { from { opacity:0; } }

.footer { position:relative; z-index:1; }
.footer-in { max-width:680px; margin:0 auto; padding:1.25rem 1.5rem 2rem; display:flex; justify-content:space-between; gap:.5rem 1.5rem; flex-wrap:wrap; font-size:12px; color:var(--faint); }
.footer-in::before { content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; width:min(680px, 100%); height:1px; background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.tz { font-variant-numeric:tabular-nums; }
.tz b { font-weight:500; color:var(--muted); }

/* Hover / focus the Sydney time to see it in the visitor's own time */
.tip { position:relative; cursor:default; outline:none; border-bottom:1px dotted var(--faint); }
.tip::after { content:attr(data-tip); position:absolute; right:50%; bottom:calc(100% + 10px); transform:translate(50%, 4px); white-space:nowrap;
  font-weight:400; font-size:12px; color:var(--text); background:#18181b; border:1px solid var(--line-strong); border-radius:7px; padding:.3rem .55rem;
  box-shadow:0 8px 24px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s var(--ease); }
.tip:hover::after, .tip:focus-visible::after, .tip:focus::after { opacity:1; transform:translate(50%, 0); }

/* Hover effects only on devices that really hover, so taps on phones
   don't leave a chip stuck in its hover state */
@media (hover:hover) {
  .org:hover { border-color:var(--line-strong); background:rgba(255,255,255,.06); }
  .socials a:hover { color:var(--text); border-color:var(--line-strong); background:var(--panel-hover); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .enter { opacity:1; filter:none; transform:none; }
}
@media (max-width:640px) {
  main { padding:5.5rem 1.25rem 3rem; }
  .footer-in { padding:1.25rem 1.25rem 1.75rem; }
}