/* gautham.co base: the reset, page type, links and the .btn pill every page shares. Loaded right after tokens.css
   by every page (hub.css adds the client area's own pieces on top). */
:root{
  --grey2:var(--grey-2);--fill2:var(--fill-2);
  --gap:clamp(12px,1.4vw,20px);
  
  --side:clamp(12px,3vw,40px)
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:var(--fs-body)/1.45 "Inter Tight",system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{width:min(1520px,calc(100vw - 2*var(--side)));margin:0 auto;padding:clamp(28px,6vh,64px) 0 96px}

/* type */
.t-label{font-size:var(--fs-small);color:var(--grey)}
.t-title{font-size:var(--fs-lead);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.t-display{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.t-display span,.t-title span{color:var(--grey2)}

/* surfaces */
.panel{background:var(--fill);border-radius:var(--r-lg);padding:var(--gap)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}
.panel>.card+.card{margin-top:10px}

/* buttons */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);border-radius:var(--r-sm);padding:10px 16px;font-size:var(--fs-small);font-weight:500;white-space:nowrap;transition:background-color var(--dur-base) ease,scale var(--dur-quick) ease}
.btn:active{scale:.97}@media (hover:hover){.btn:hover{background:var(--ink-hover)}}
.btn.sec{background:var(--fill);color:var(--ink)}@media (hover:hover){.btn.sec:hover{background:var(--fill2)}}
.go{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:600;letter-spacing:.04em;text-transform:none}
.go::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;transition:translate var(--dur-base) var(--out)}
.link{all:unset;cursor:pointer;color:var(--grey);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-base) ease}@media (hover:hover){.link:hover{color:var(--ink)}}
.btn:focus-visible,.link:focus-visible,.tile:focus-visible,.row:focus-visible,.proj:focus-visible{outline:2px solid rgba(17,17,17,.35);outline-offset:3px}
/* fields: .field in buttons.css, from the --field-* tokens */

/* a person's dithered avatar (dither-av.js), in the header, the hub and live cursors */
.dav{display:inline-block;flex:none;background-color:var(--fill);background-size:cover;image-rendering:pixelated;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}