/* Kiln shared design system, warm editorial. Used by get-started.html.
   (index.html inlines the same tokens.) */
@font-face{font-family:'Bricolage';src:url('fonts/bricolage-grotesque.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-italic.woff2') format('woff2');font-weight:200 700;font-style:italic;font-display:swap}
@font-face{font-family:'JBMono';src:url('fonts/jetbrains-mono.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --paper:#ebeae5; --paper-2:#e3e1da; --card:#f4f2ec;
  --wash-blue:#e0e2ec; --wash-sage:#e2e7dd; --wash-clay:#f4e1d7;
  --ink:#262630; --ink-soft:#5e5f6a; --ink-faint:#90909a;
  --clay:#f0704f; --clay-deep:#d2542f; --clay-soft:#f6a890; --cream:#fdeee7;
  --blue:#7c8bb4; --sage:#7e9472; --kiln:#23252f;
  --edge:rgba(36,38,47,.12); --edge-2:rgba(36,38,47,.2);
  --display:'Bricolage',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JBMono',ui-monospace,Menlo,monospace;
  --r:16px; --r-sm:11px;
  --shadow:0 1px 2px rgba(36,38,47,.07), 0 22px 48px -28px rgba(36,38,47,.4);
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--display);background:var(--paper);color:var(--ink);font-weight:430;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","ss02";overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}
::selection{background:var(--clay-soft);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.kick{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-deep)}
.in-it{font-family:var(--serif);font-style:italic;font-weight:430}

/* nav */
header.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(150%) blur(12px);
  background:rgba(233,234,239,.82);border-bottom:1px solid var(--edge)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:760;font-size:21px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 13px;font-size:15px;font-weight:480;color:var(--ink-soft);border-radius:9px;transition:.16s}
.nav-links a:hover{color:var(--ink);background:rgba(36,38,47,.05)}
.nav-links a.gh{padding:8px 10px;display:inline-flex;align-items:center;color:var(--ink-soft)}
.nav-links a.gh:hover{color:var(--ink)}
.nav-links a.btn-clay,.nav-links a.btn-clay:hover{color:var(--cream)}
.btn{font-family:var(--display);font-weight:600;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;transition:transform .14s,box-shadow .14s,background .16s,border-color .16s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-clay{background:var(--clay);color:var(--cream);border-color:var(--clay)}
.btn-clay:hover{background:var(--clay-deep);border-color:var(--clay-deep);box-shadow:0 10px 24px -10px rgba(240,112,79,.7)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--edge-2)}
.btn-line:hover{border-color:var(--ink);background:rgba(36,38,47,.04)}
.nav .btn{font-size:14.5px;padding:9px 17px;border-radius:999px}
.menu-btn{display:none}

/* footer */
footer{border-top:1px solid var(--edge);padding:56px 0 80px;margin-top:30px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot-l{max-width:34ch}
.foot-l .brand{margin-bottom:14px}
.foot-l p{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-soft);line-height:1.45}
.foot-links{display:flex;gap:26px;font-family:var(--mono);font-size:13px}
.foot-links a{color:var(--ink-soft);transition:.15s}
.foot-links a:hover{color:var(--clay-deep)}

@media(max-width:880px){
  .nav-links{display:none}
  .nav-links.show{display:flex;position:absolute;top:60px;right:14px;left:14px;flex-direction:column;align-items:stretch;
    background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:10px;box-shadow:var(--shadow);gap:2px}
  .menu-btn{display:inline-flex;background:transparent;border:1px solid var(--edge-2);border-radius:9px;padding:9px 11px;cursor:pointer}
  .menu-btn svg{width:20px;height:20px}
}
@media(max-width:520px){body{font-size:17px}.wrap{padding:0 20px}.nav-in{padding:11px 20px}}