/* Gradien — fincore/atelier
   Lassie teardown (brand-guidelines/inspiration/lassie) for mechanics.
   Identity from Gradien stills: lab / product / design / business as one
   house. Divergence from the house kit: cream canvas, old-style serif
   display, 64px sheet radius, floating pill nav. ABC Marist is commercial;
   Source Serif 4 (OFL) is the substitute. DM Sans OFL for UI.
   Colors measured on lassie.ai then warmed toward plaster/honey. */

@font-face { font-family: 'Source Serif'; src: url('assets/fonts/source-serif-4-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url('assets/fonts/source-serif-4-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --stone: #f4f0e8;
  --ink: #1a1613;
  --core: #070503;
  --quiet: #5c564e;
  --frost: #e3ddcf66;
  --line: #d8d1c0;
  --white: #fff;
  --pursue: #3d6b45;

  --d1: clamp(3.4rem, 6.2vw, 5.4rem);
  --d2: clamp(2.2rem, 4.2vw, 3.6rem);
  --d3: clamp(1.35rem, 1.8vw, 1.6rem);
  --body: 1.05rem;
  --micro: 0.75rem;

  --r-sheet: 64px;
  --r-nav: 16px;
  --r-pill: 999px;
  --gutter: clamp(1.2rem, 4vw, 5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 650ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stone); -webkit-text-size-adjust: 100%; }
html.js { scrollbar-width: none; }
html.js::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 400 var(--body)/1.5 'DM Sans', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 {
  font-family: 'Source Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
  text-wrap: pretty;
}
h1 { font-size: var(--d1); }
h2 { font-size: var(--d2); }
h3 { font-size: var(--d3); line-height: 1.15; letter-spacing: -0.01em; }
em { font-style: italic; }

.at-skip {
  position: fixed; top: -60px; left: 16px; z-index: 40;
  padding: 8px 14px; background: var(--core); color: var(--white);
  font: 400 var(--micro)/1 'IBM Plex Mono', ui-monospace, monospace;
}
.at-skip:focus { top: 8px; }

html.js [data-reveal] { opacity: 0; transform: translateY(16px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js { scrollbar-width: auto; }
  html.js::-webkit-scrollbar { display: initial; }
  html.js .at-sb { display: none !important; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}