:root { --blog-ink:#182e36; --blog-night:#13262d; --blog-paper:#f6f1e9; --blog-sand:#e7dfd2; --blog-coral:#cf715c; --blog-mint:#bfd6ca; --blog-line:rgba(24,46,54,.17); --blog-mono:'DM Mono',monospace; --blog-sans:'DM Sans',sans-serif; --blog-serif:'Playfair Display',serif; }
.blog-header { min-height:76px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--blog-line); background:rgba(246,241,233,.94); position:sticky; top:0; z-index:4; backdrop-filter:blur(13px); }
.blog-header nav { display:flex; align-items:center; gap:25px; font-size:13px; font-weight:600; }.blog-header nav a { color:#526167; }.blog-header nav a:hover,.blog-header nav a[aria-current="page"] { color:var(--blog-ink); }.blog-home-link { border:1px solid var(--blog-ink); border-radius:999px; padding:9px 14px; color:var(--blog-ink) !important; }
.blog-main { min-height:calc(100vh - 76px); }.blog-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr); gap:50px; align-items:end; padding:clamp(68px,10vw,138px) clamp(22px,8vw,124px) clamp(58px,8vw,100px); background:radial-gradient(circle at 84% 20%,rgba(191,214,202,.78),transparent 21%),linear-gradient(145deg,#f7f2e9 0%,#f6f1e9 58%,#e9dfd0 100%); }
.blog-kicker { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:#58676a; font:500 11px/1.2 var(--blog-mono); letter-spacing:.08em; text-transform:uppercase; }.blog-kicker span { width:18px; height:1px; background:var(--blog-coral); }.blog-hero h1 { max-width:780px; margin:0; color:var(--blog-ink); font:700 clamp(46px,6vw,82px)/.95 var(--blog-serif); letter-spacing:-.064em; }.blog-hero h1 em { color:var(--blog-coral); font-weight:600; }.blog-hero p:not(.blog-kicker) { max-width:520px; margin:26px 0 0; color:#526167; font-size:17px; line-height:1.65; }
.blog-principles { display:grid; gap:1px; margin:0; background:rgba(24,46,54,.14); border:1px solid rgba(24,46,54,.10); }.blog-principles div { padding:18px 19px; background:rgba(255,253,248,.74); }.blog-principles dt { color:var(--blog-coral); font:700 11px var(--blog-mono); letter-spacing:.08em; text-transform:uppercase; }.blog-principles dd { margin:6px 0 0; color:#40595f; font-size:13px; line-height:1.45; }
.blog-listing { padding:clamp(58px,8vw,104px) clamp(22px,8vw,124px); }.blog-listing-head { display:flex; justify-content:space-between; gap:28px; align-items:end; padding-bottom:27px; border-bottom:1px solid var(--blog-line); }.blog-listing-head h2 { margin:0; color:var(--blog-ink); font:700 clamp(32px,4vw,54px)/1 var(--blog-serif); letter-spacing:-.055em; }.blog-listing-head p { max-width:390px; margin:0; color:#657276; font-size:14px; line-height:1.55; }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:1px; background:var(--blog-line); }.article-card { min-height:296px; padding:clamp(25px,4vw,44px); background:#fbf8f1; display:flex; flex-direction:column; align-items:flex-start; transition:background .18s ease,transform .18s cubic-bezier(.23,1,.32,1); }.article-card:hover { background:#fffdf8; transform:translateY(-3px); }.article-card:nth-child(4n+2) { background:#e9f0e9; }.article-card:nth-child(4n+3) { background:#f2e5de; }.article-card:nth-child(4n) { background:#e6e9e4; }.article-number { color:var(--blog-coral); font:600 11px var(--blog-mono); letter-spacing:.09em; }.article-card h3 { max-width:520px; margin:34px 0 14px; color:var(--blog-ink); font:700 clamp(25px,3vw,37px)/1.02 var(--blog-serif); letter-spacing:-.05em; }.article-card p { max-width:520px; margin:0; color:#55666a; font-size:14px; line-height:1.57; }.article-card a { display:inline-flex; gap:9px; align-items:center; margin-top:auto; padding-top:27px; color:#334d53; font-size:12px; font-weight:800; }.article-card a span { color:var(--blog-coral); font-size:20px; font-weight:400; }
.article-shell { padding:clamp(42px,7vw,86px) clamp(22px,8vw,124px) clamp(74px,10vw,132px); }.article-frame { max-width:870px; margin:0 auto; }.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:37px; color:#667579; font:500 10px var(--blog-mono); letter-spacing:.06em; text-transform:uppercase; }.breadcrumbs a:hover { color:var(--blog-coral); }.article-header { padding-bottom:43px; border-bottom:1px solid var(--blog-line); }.article-header h1 { max-width:820px; margin:0; color:var(--blog-ink); font:700 clamp(41px,5.6vw,72px)/.98 var(--blog-serif); letter-spacing:-.062em; }.article-dek { max-width:680px; margin:25px 0 0; color:#526167; font-size:18px; line-height:1.62; }.article-meta { display:flex; flex-wrap:wrap; gap:10px 21px; margin-top:28px; color:#667579; font:500 10px var(--blog-mono); letter-spacing:.04em; text-transform:uppercase; }.article-meta strong { color:#40565b; font-weight:700; }
.article-content { max-width:720px; margin:0 auto; padding-top:48px; color:#374e54; font-size:17px; line-height:1.78; }.article-content h2 { margin:51px 0 16px; color:var(--blog-ink); font:700 clamp(27px,3.2vw,38px)/1.07 var(--blog-serif); letter-spacing:-.045em; }.article-content h2:first-child { margin-top:0; }.article-content h3 { margin:29px 0 11px; color:var(--blog-ink); font:700 21px/1.18 var(--blog-serif); letter-spacing:-.03em; }.article-content p { margin:0 0 19px; }.article-content ul { margin:0 0 23px; padding-left:1.25em; }.article-content li { margin:8px 0; }.article-content .checklist { padding:24px 27px 22px; border-left:3px solid var(--blog-coral); background:#f0e6d8; list-style:none; }.article-content .checklist li { position:relative; padding-left:24px; }.article-content .checklist li::before { position:absolute; left:0; top:.45em; width:10px; height:5px; border-bottom:2px solid #a85441; border-left:2px solid #a85441; content:""; transform:rotate(-45deg); }.article-content .note { padding:20px 23px; border:1px solid #d7dfd8; background:#edf3ef; color:#506567; font-size:15px; line-height:1.62; }.article-content .faq { margin-top:45px; padding-top:35px; border-top:1px solid var(--blog-line); }.article-content .faq h2 { margin-top:0; }.article-content .faq dt { margin:23px 0 6px; color:var(--blog-ink); font-weight:800; }.article-content .faq dd { margin:0; }.article-cta { max-width:720px; margin:55px auto 0; padding:31px; background:var(--blog-night); color:#e5efea; }.article-cta p { max-width:570px; margin:11px 0 0; font-size:15px; line-height:1.6; }.article-cta strong { color:white; font:700 27px/1 var(--blog-serif); letter-spacing:-.035em; }.article-cta a { display:inline-flex; gap:9px; margin-top:22px; color:#f2b5a7; font-size:13px; font-weight:800; }.article-cta a span { font-size:20px; font-weight:400; }.article-disclaimer { max-width:720px; margin:28px auto 0; color:#718184; font-size:12px; line-height:1.55; }
.blog-footer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:25px; align-items:center; padding:38px clamp(22px,8vw,124px); border-top:1px solid var(--blog-line); background:var(--blog-paper); }.blog-footer p { margin:0; color:#637175; font-size:13px; }.blog-footer small { color:#788487; font:400 10px var(--blog-mono); }.blog-footer a { color:#a85441; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:780px) { .blog-header { min-height:66px; }.blog-header nav { gap:14px; font-size:12px; }.blog-header nav a:not(.blog-home-link) { display:none; }.blog-hero { grid-template-columns:1fr; gap:34px; }.blog-principles { grid-template-columns:1fr 1fr; }.article-grid { grid-template-columns:1fr; }.blog-listing-head { align-items:flex-start; flex-direction:column; }.blog-footer { grid-template-columns:1fr; } }
@media (max-width:440px) { .blog-principles { grid-template-columns:1fr; }.article-content { font-size:16px; }.article-content .checklist { padding:21px 18px; } }