@font-face { font-family: Inter; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/inter.woff2) format("woff2"); }
* { box-sizing: border-box; }
html { background: #fdfdfc; color: #111; color-scheme: light; }
body { margin: 0; font-family: Inter, -apple-system, system-ui, Arial, sans-serif; font-size: 14px; font-weight: 460; line-height: 20px; letter-spacing: -.09px; -webkit-font-smoothing: antialiased; }
main { width: min(550px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0; }
h1, h2, p, ul { margin: 0; }
h1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.bio { padding-top: 8px; }
.bio p { padding-top: 16px; }
a { color: inherit; text-decoration: none; }
.bio a { text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); text-underline-offset: 2px; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
section { margin-top: 40px; }
h2 { padding-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 460; color: #6b6b68; }
ul { padding: 0; list-style: none; }
li + li { margin-top: 16px; }
li a { display: block; }
li a:hover { text-decoration: none; }
.t { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color .15s; }
li a:hover .t { text-decoration-color: rgba(0,0,0,.3); }
.d { display: block; color: #6b6b68; }
footer { padding-top: 64px; color: #6b6b68; font-size: 13px; }
#clock { font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #22a355; vertical-align: middle; }
header { display: flex; align-items: center; justify-content: space-between; }
.spiral { display: block; color: #111; }
@media (prefers-reduced-motion: no-preference) {
  .spiral path { stroke-dasharray: 100 100; animation: trace 5s cubic-bezier(.6,0,.4,1) infinite; }
  @keyframes trace { 0% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
}
.lightbox { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 24px; border: 0; background: transparent; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: zoom-out; }
.lightbox[open] { display: flex; animation: lb-in .2s ease-out; }
.lightbox::backdrop { background: rgba(253,253,252,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lightbox img { max-width: min(100%, 1400px); max-height: calc(100% - 40px); object-fit: contain; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 64px -24px rgba(0,0,0,.25); }
.lightbox img { cursor: e-resize; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(253,253,252,.9); color: #111; font: inherit; font-size: 16px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lb-nav:hover { background: #fff; }
.lb-nav:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
@media (max-width: 600px) { .lb-nav { top: auto; bottom: 16px; transform: none; } }
.lightbox p { margin: 0; color: #6b6b68; font-size: 13px; text-align: center; }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } }
.toast { position: fixed; left: 50%; bottom: 24px; padding: 8px 14px; border-radius: 999px; background: #111; color: #fdfdfc; font-size: 13px; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.skip { position: absolute; left: 24px; top: -80px; padding: 8px; background: #fdfdfc; }
.skip:focus { top: 16px; }
@media (max-width: 600px) { main { padding-top: 40px; } }
@media (prefers-reduced-motion: no-preference) {
  header, .bio, section, footer { animation: enter .6s both; animation-delay: calc(var(--i, 0) * .08s); }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } }
}
.plain { text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); text-underline-offset: 2px; }
.xp + .xp { margin-top: 28px; }
.xp h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.xp h3 .d { display: inline; font-weight: 460; color: #6b6b68; }
.xp .meta { color: #6b6b68; }
.xp p + p { margin-top: 8px; }
.xp .meta + p { margin-top: 8px; }