@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");
:root{--ink:#19120f;--red:#e22219;--yellow:#ffd52b;--paper:#f5eee2;--muted:#756a62;--line:rgba(40,25,18,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{display:block;max-width:100%}
h1,h2,h3,.button,.eyebrow{font-family:"Manrope","DM Sans",Arial,sans-serif}
.blog-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2rem;width:min(1420px,calc(100% - 2rem));margin:1rem auto 0;padding:1rem 1.4rem;background:rgba(255,249,236,.87);border:1px solid var(--line);border-radius:1.5rem;box-shadow:0 12px 32px rgba(47,25,10,.11);backdrop-filter:blur(16px)}
.blog-brand{display:flex;align-items:center;gap:1rem;min-width:0}
.blog-brand img{width:190px;height:36px;object-fit:contain}
.blog-brand span{max-width:6rem;color:var(--muted);font:800 .55rem/1.25 "Manrope",sans-serif;letter-spacing:.13em;text-transform:uppercase}
.blog-nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.blog-nav a{padding:.75rem .9rem;color:var(--muted);font-size:.75rem;font-weight:800;white-space:nowrap}
.blog-nav a:hover,.blog-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:8px}
.button{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.3rem;border-radius:.9rem;background:var(--yellow);color:#19120f;font-size:.8rem;font-weight:800;box-shadow:0 8px 0 rgba(25,18,15,.1);transition:transform .18s}
.button:hover{transform:translateY(-3px)}
.blog-main{width:min(1420px,calc(100% - 3rem));min-height:48vh;margin:auto;padding:3.5rem 0 7rem}
.blog-hero{position:relative;overflow:hidden;padding:clamp(2rem,6vw,6rem);border-radius:2.5rem;background:radial-gradient(circle at 85% 30%,rgba(255,213,43,.55),transparent 24%),linear-gradient(135deg,#fff9ec,#eadfce)}
.blog-hero::after{position:absolute;right:-5rem;bottom:-10rem;width:28rem;height:28rem;border:2.5rem solid rgba(226,34,25,.11);border-radius:50%;content:"";pointer-events:none}
.eyebrow{display:inline-block;margin-bottom:1rem;color:var(--red);font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.blog-hero h1{position:relative;z-index:1;max-width:13ch;margin:0 0 1.25rem;font-size:clamp(3rem,7vw,6.6rem);font-weight:800;letter-spacing:-.08em;line-height:.95}
.blog-hero h1 em{color:var(--red);font-style:normal}
.blog-hero p{position:relative;z-index:1;max-width:40rem;margin:0;color:#5d4d43;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7}
.blog-content{padding-top:3rem}
.blog-empty{max-width:52rem;padding:2rem;border:1px solid var(--line);border-radius:1.5rem;background:#fff9ec;line-height:1.7}
.blog-empty a,.article-body a{color:#a90d0a;text-decoration:underline;text-underline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.card{overflow:hidden;min-width:0;border:1px solid var(--line);border-radius:1.75rem;background:#fff9ec;box-shadow:0 12px 32px rgba(47,25,10,.08);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(47,25,10,.14)}
.card img{width:100%;height:230px;object-fit:cover}
.card-body{padding:1.5rem}
.card h2{margin:.6rem 0 1rem;font-size:1.55rem;letter-spacing:-.04em}
.card h2 a:hover{color:var(--red)}
.card p{line-height:1.65}
.meta{color:var(--muted);font-size:.78rem;font-weight:700}
.article{max-width:900px;margin:auto}
.article .back{display:inline-block;margin-bottom:2rem;color:var(--red);font-weight:800}
.article h1{margin:.5rem 0 1rem;font-size:clamp(2.8rem,7vw,5.7rem);letter-spacing:-.07em;line-height:1.05}
.article-lead{font-size:1.2rem;line-height:1.7}
.article-featured{width:100%;max-height:520px;object-fit:cover;margin:2rem 0;border-radius:1.5rem}
.article-body{font-size:1.08rem;line-height:1.8}
.article-body h2,.article-body h3{margin-top:2.5rem;scroll-margin-top:7rem}
.article-body h2{font-size:2rem}
.article-body h3{font-size:1.45rem}
.article-body img{max-width:100%;height:auto;border-radius:1rem}
.article-body blockquote{margin:2rem 0;padding:1rem 1.5rem;border-left:5px solid var(--red);background:#fff9ec}
.blog-toc{margin:2rem 0;padding:1.5rem 2rem;border-radius:1.25rem;background:#fff3d4}
.blog-toc strong{font-size:1.1rem}
.blog-toc ol{margin-bottom:0;padding-left:1.3rem}
.blog-toc li{padding:.25rem 0}
.blog-toc li.h3{margin-left:1.2rem}
.blog-toc a:hover{color:var(--red)}
.blog-after{display:flex;align-items:center;gap:1.5rem;margin:3rem auto;max-width:900px}
.blog-footer{padding:4rem max(1.5rem,calc((100% - 1420px)/2)) 2rem;background:radial-gradient(circle at 10% 10%,rgba(226,34,25,.2),transparent 25%),#0f0b09;color:#fff8eb}
.blog-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem}
.blog-footer img{width:min(100%,250px)}
.blog-footer p{max-width:26rem;color:rgba(255,248,235,.6);line-height:1.6}
.blog-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.blog-footer strong{color:var(--yellow)}
.blog-footer-links a{color:rgba(255,248,235,.7)}
.blog-footer-links a:hover{color:#fff}
.blog-footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,248,235,.5);font-size:.72rem}
@media(max-width:900px){.blog-header{flex-wrap:wrap;gap:.5rem}.blog-nav{order:3;width:100%;justify-content:flex-start}.blog-header>.button{margin-left:auto}.blog-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-header{width:calc(100% - 1rem);padding:.9rem}.blog-brand img{width:145px}.blog-brand span{display:none}.blog-header>.button{display:none}.blog-nav{gap:0}.blog-nav a{padding:.55rem .65rem}.blog-main{width:calc(100% - 1rem);padding-top:1rem}.blog-hero{padding:2.5rem 1.5rem;border-radius:1.5rem}.blog-hero h1{font-size:clamp(2.8rem,14vw,4.5rem)}.blog-content{padding:1rem .5rem}.blog-footer-grid{grid-template-columns:1fr}.blog-after{flex-wrap:wrap}}
.article-body{max-width:100%;overflow-x:auto}
.article-body figure{max-width:100%;margin:2rem auto;text-align:center}
.article-body figure[data-align="left"]{margin-left:0;text-align:left}
.article-body figure[data-align="right"]{margin-right:0;text-align:right}
.article-body figure img{display:inline-block;max-width:100%;height:auto}
.article-body figcaption{margin:.5rem auto;color:#675548;font-size:.9rem}
.article-body table{min-width:420px;max-width:100%;border-collapse:collapse;margin:2rem 0}
.article-body th,.article-body td{padding:.75rem;border:1px solid #d6c7b2;text-align:left;vertical-align:top}
.article-body th{background:#ffedc9}
.article-body pre{overflow-x:auto;padding:1rem;border-radius:1rem;background:#211710;color:#fff8eb}
.article-body code{font-family:ui-monospace,Consolas,monospace}
.article-body hr{height:2px;margin:2.5rem 0;border:0;background:#dbcab3}
.article-body iframe{display:block;width:min(100%,720px);aspect-ratio:16/9;height:auto;margin:2rem auto;border:0;border-radius:1rem}
.article-body ul,.article-body ol{padding-left:1.6rem}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}