/* Folli blog — shares the design system with docs/folli/index.html and the legal pages. */
:root{
  --sage-50:#F4F6F2; --sage-100:#E5EBDF; --sage-300:#C2CFB6; --sage-500:#A8B89E; --sage-700:#7A8B72; --sage-900:#3F4A3A;
  --sand-50:#FBF8F2; --sand-200:#F0E8D5; --sand-400:#E8DCC4; --sand-text:#6F5D34;
  --ink-900:#2E2E2E; --ink-700:#4A4A4A; --ink-500:#767676; --ink-100:#E8E8E8;
  --paper:#FAFAF7; --white:#FFFFFF;
  --radius-md:12px; --radius-lg:20px;
  --font-display:'Instrument Serif','Noto Serif KR',Georgia,serif;
  --font-body:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink-900);
  font-family:var(--font-body); line-height:1.78; font-size:16px; word-break:keep-all;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:720px; margin:0 auto; padding:44px 20px 96px;}
.eyebrow{font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--sage-700); font-weight:600;}

header.site{border-bottom:1px solid var(--ink-100); padding-bottom:22px; margin-bottom:8px;}
.brand{font-family:var(--font-display); font-size:30px; line-height:1; color:var(--ink-900); text-decoration:none; letter-spacing:-.01em;}
.brand i{color:var(--sage-700); font-style:italic;}
.sitenav{margin-top:16px; font-size:13px; display:flex; flex-wrap:wrap; gap:16px;}
.sitenav a{color:var(--sage-700); text-decoration:none; font-weight:500;}
.sitenav a:hover{color:var(--sage-900);}

/* blog index */
.index-head{margin:40px 0 0; padding-bottom:32px; border-bottom:1px solid var(--ink-100);}
.index-head h1{font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.25; letter-spacing:-.01em; margin:8px 0 10px;}
.index-head p{color:var(--ink-700); margin:0;}
.list-label{margin:36px 0 16px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-500); font-weight:600;}
.post-list{display:flex; flex-direction:column; gap:14px;}
.post-card{display:block; text-decoration:none; color:inherit; padding:24px; border:1px solid var(--ink-100); border-radius:var(--radius-md); background:var(--white); transition:border-color .16s ease, box-shadow .16s ease;}
.post-card:hover{border-color:var(--sage-300); box-shadow:0 1px 2px rgba(46,46,46,.04), 0 1px 3px rgba(46,46,46,.06);}
.post-card .pmeta{font-size:12px; color:var(--ink-500); font-family:var(--font-mono); margin-bottom:8px;}
.post-card .ptitle{font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.3; color:var(--ink-900); margin:0 0 8px;}
.post-card .pexcerpt{font-size:14.5px; color:var(--ink-700); margin:0;}

/* article */
article .a-eyebrow{margin-bottom:12px;}
article h1{font-family:var(--font-display); font-weight:500; font-size:34px; line-height:1.3; letter-spacing:-.01em; margin:6px 0 14px; color:var(--ink-900);}
article .a-meta{font-size:13px; color:var(--ink-500); font-family:var(--font-mono); padding-bottom:24px; border-bottom:1px solid var(--ink-100); margin-bottom:32px;}
article .lede{font-size:19px; line-height:1.65; color:var(--ink-700); margin:0 0 28px;}
article h2{font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.35; color:var(--ink-900); margin:42px 0 12px;}
article h3{font-size:16px; font-weight:600; color:var(--ink-900); margin:28px 0 8px;}
article p{color:var(--ink-700); margin:14px 0;}
article strong{color:var(--ink-900);}
article .mono{font-family:var(--font-mono); font-feature-settings:'tnum'; color:var(--sage-700);}
article hr{border:none; border-top:1px solid var(--ink-100); margin:40px 0;}

.note{background:var(--sand-50); border:1px solid var(--sand-200); border-radius:var(--radius-md); padding:18px 20px; margin:28px 0; font-size:14.5px; line-height:1.65; color:var(--sand-text);}

.cta{margin-top:48px; padding:28px; border-radius:var(--radius-lg); background:
    radial-gradient(80% 120% at 0% 0%, var(--sage-100), transparent 60%), var(--white);
  border:1px solid var(--sage-100);}
.cta .k{font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--sage-700); font-weight:600;}
.cta h3{font-family:var(--font-display); font-weight:500; font-size:24px; color:var(--ink-900); margin:8px 0 8px;}
.cta p{font-size:14.5px; color:var(--ink-700); margin:0 0 16px;}
.cta a.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  background:var(--sage-500); color:var(--white); text-decoration:none; font-weight:600; font-size:14px;}
.disc-inline{font-size:12.5px; color:var(--ink-500); margin-top:14px;}

footer.site{margin-top:64px; padding-top:24px; border-top:1px solid var(--ink-100); font-size:12.5px; color:var(--ink-500); line-height:1.6;}
footer.site .links{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px;}
footer.site .links a{color:var(--sage-700); text-decoration:none; font-weight:500;}
footer.site p{margin:4px 0;}

@media (max-width:560px){
  article h1{font-size:29px;}
  .index-head h1{font-size:29px;}
  .lede{font-size:17px;}
}