:root{
  --bg-cream:#FFFCF5;--bg-cream-alt:#F1ECE2;--bg-espresso:#1A1818;
  --ink:#1A1818;--ink-soft:rgba(26,24,24,.66);--ink-faint:rgba(26,24,24,.4);
  --ink-hairline:rgba(26,24,24,.12);--cream-soft:rgba(255,252,245,.72);
  --cream-faint:rgba(255,252,245,.4);--accent:#A65316;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg-cream);color:var(--ink);
  font-family:'Satoshi','Noto Sans KR',system-ui,sans-serif;font-weight:400;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:24px clamp(24px,5vw,80px);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(to bottom,var(--bg-cream) 30%,rgba(255,252,245,0) 100%);}
.nav-mark{font-weight:500;font-size:14px;letter-spacing:.06em;}
.nav-links{display:flex;gap:clamp(16px,2.4vw,24px);align-items:center;}
.nav-link{font-size:13px;letter-spacing:.06em;border-bottom:1px solid currentColor;padding-bottom:2px;}

.kicker{font-family:'Satoshi',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:0;}

/* article */
.article{max-width:760px;margin:0 auto;padding:160px clamp(24px,5vw,40px) 72px;}
.article-head{border-bottom:1px solid var(--ink-hairline);padding-bottom:40px;margin-bottom:48px;}
.article h1{font-family:'Satoshi',sans-serif;font-weight:200;font-size:clamp(33px,5.2vw,58px);
  line-height:1.07;letter-spacing:-.02em;margin:18px 0 0;}
.article-meta{margin-top:24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.article-body p{margin:0 0 22px;font-size:clamp(17px,1.4vw,19px);line-height:1.72;}
.article-body h2{font-family:'Satoshi',sans-serif;font-weight:300;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.01em;margin:54px 0 18px;line-height:1.18;}
.article-body h3{font-family:'Satoshi',sans-serif;font-weight:500;font-size:clamp(19px,2vw,22px);margin:36px 0 14px;}
.article-body ul{margin:0 0 24px;padding-left:0;list-style:none;}
.article-body li{position:relative;padding-left:26px;margin-bottom:13px;line-height:1.62;font-size:clamp(16px,1.3vw,18px);}
.article-body li::before{content:"+";position:absolute;left:0;color:var(--accent);font-weight:500;}
.article-body a{border-bottom:1px solid var(--ink-hairline);transition:color .2s,border-color .2s;}
.article-body a:hover{border-color:var(--accent);color:var(--accent);}
.article-body strong{font-weight:600;}

.article-cta{margin-top:64px;padding:30px 32px;background:var(--bg-cream-alt);border-left:3px solid var(--accent);}
.article-cta p{margin:0 0 18px;font-size:16px;line-height:1.55;color:var(--ink-soft);}
.article-cta p strong{color:var(--ink);}
.article-cta a{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.article-cta a:hover{opacity:.7;}

.back-link{display:inline-block;margin-top:48px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.back-link:hover{color:var(--accent);}

/* blog index */
.blog-hero{max-width:1100px;margin:0 auto;padding:160px clamp(24px,5vw,80px) 40px;}
.blog-hero h1{font-family:'Satoshi',sans-serif;font-weight:200;font-size:clamp(44px,9vw,104px);
  line-height:.96;letter-spacing:-.02em;margin:20px 0 0;}
.blog-hero .dek{margin-top:26px;max-width:560px;font-style:italic;color:var(--ink-soft);font-size:clamp(16px,1.6vw,19px);line-height:1.5;}
.blog-list{max-width:1100px;margin:0 auto;padding:24px clamp(24px,5vw,80px) 100px;border-top:1px solid var(--ink-hairline);}
.post-row{display:grid;grid-template-columns:1fr;gap:8px;padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--ink-hairline);transition:opacity .25s;}
.post-row:hover{opacity:.62;}
.post-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.post-title{font-family:'Satoshi',sans-serif;font-weight:300;font-size:clamp(26px,3.6vw,42px);line-height:1.1;letter-spacing:-.01em;margin:6px 0;}
.post-dek{font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:var(--ink-soft);max-width:620px;}
.post-meta{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}

/* footer */
.footer{background:var(--bg-espresso);color:var(--cream-soft);padding:clamp(56px,7vw,88px) clamp(24px,5vw,80px) 40px;}
.footer-inner{max-width:1100px;margin:0 auto;}
.footer-cols{display:flex;flex-wrap:wrap;gap:48px;}
.footer-col h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-faint);margin:0 0 14px;font-weight:500;}
.footer-col a,.footer-col p{display:block;font-size:15px;line-height:1.7;color:var(--cream-soft);margin:0;}
.footer-col a:hover{color:#fff;}
.footer-bottom{max-width:1100px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,252,245,.12);
  display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;color:var(--cream-faint);flex-wrap:wrap;gap:12px;}

@media(max-width:600px){
  .article{padding-top:118px;}
  .blog-hero{padding-top:118px;}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;}}