/* ───────────────────────────────────────────────────────────
   jlawrence.ai — shared foundation
   Tokens, reset, type, scroll-reveal, grain. Tweaks drive the
   variables / classes declared here; each direction layers its
   own layout CSS on top.
   ─────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0a0f;
  --bg-lift:#101019;          /* raised panels */
  --bg-deep:#070709;          /* deepest wells */
  --ink:#ece7dd;              /* warm near-white */
  --ink-soft:#b6b0a4;         /* warm gray body */
  --ink-mute:#7d776c;         /* faint labels */
  --accent:#d4a847;           /* gold — tweakable */
  --accent-deep:#a9812f;
  --hair:rgba(236,231,221,.10);
  --hair-gold:color-mix(in oklab, var(--accent) 30%, transparent);

  --head:'Playfair Display', Georgia, serif;   /* tweakable */
  --body:'Libre Franklin', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --pad-y:clamp(72px,11vw,168px);  /* section rhythm — density tweak scales this */
  --gut:clamp(20px,6vw,80px);      /* page gutter */
  --maxw:1200px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* density tweak */
body.tw-compact{ --pad-y:clamp(52px,7vw,104px); }

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.65;
  font-size:clamp(16px,1.05vw,18px);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

h1,h2,h3,h4{ font-family:var(--head); font-weight:600; line-height:1.04; margin:0; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:color-mix(in oklab,var(--accent) 40%,transparent); color:#fff; }

/* shared atoms ------------------------------------------------ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

.kicker{
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
}

.rule{ height:1px; background:var(--hair); border:0; margin:0; }

/* button -------------------------------------------------------*/
.btn{
  --by:16px; --bx:30px;
  display:inline-flex; align-items:center; gap:.7em;
  padding:var(--by) var(--bx);
  font-family:var(--body); font-weight:600; font-size:15px;
  letter-spacing:.02em;
  cursor:pointer; border:0; position:relative;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-gold{
  background:var(--accent); color:#15110a;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 60%,#000);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px var(--accent); }
.btn-ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-gold);
}
.btn-ghost:hover{ color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); transform:translateY(-2px); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* scroll reveal -----------------------------------------------*/
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* preview/static mode (e.g. launcher thumbnails) — show everything at once */
.reveal-static .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* film grain (texture tweak) ----------------------------------*/
body.tw-grain::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}