/* base.css: design tokens (colours, radius, fonts), reset, shared utilities, film grain, icon size, pointer spotlight.
   Loaded first. Docs: Doc/Elements/Base Styles.md */
/* Layout: a phone-style app on warm paper. Home = profile card + a dark "stack in motion" card
   + eight app tiles. Each tile opens a full-screen view that grows out of the tile. */
/* Inter (variable, weights 400-700, Latin letters only), served from our own fonts/ folder:
   no trip to Google Fonts. Downloaded from Google Fonts; Inter is free (SIL Open Font License). */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-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}
:root{
  --paper:#E6E3DB;
  --paper-2:#F0EEE7;
  --card:#FBFAF6;
  --ink:#141413;
  --muted:#6b6962;
  --line:#c9c6bd;
  --copper:#b693be;
  --pencil:#494947;   /* graphite grey for the loading animation's lines, pen and labels (css/intro.css) */
  --green:#998365;
  --pink:#d49ab7;
  --dark:#151513;
  --shadow:0 24px 70px rgba(24,22,17,.11),0 4px 12px rgba(24,22,17,.06);
  --soft:0 10px 30px rgba(24,22,17,.08);
  --r:28px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow-x:hidden}
body{overflow-y:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;line-height:1.5}
button,a{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
h1,h2,h3,h4,p,ul,dl{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.eyebrow{font:10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* Phones/tablets: a full-screen layer on top of everything makes every animation below it cost more,
   and at 4% opacity nobody sees it on a phone anyway. */
@media(any-hover:none){.grain{display:none}}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* spotlight that follows the pointer on cards */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(176,85,47,.11),transparent 70%)}
.spot:hover::before{opacity:1}