@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#f7f7f4;
--ink:#26251e;
--body:#5a5852;
--accent:#f54e00;
--card:#ffffff;
--hairline:#e6e5e0;
--hairline-soft:#efeee8;
--hairline-strong:#cfcdc4;
--muted:#807d72;
--muted-soft:#a09c92;
--surface-strong:#e6e5e0;
--success:#1f8a65;
--error:#cf2d56;
--font:'Inter',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
--radius-card:12px;
--radius-btn:8px;
--max-w:1200px;
--sp:80px;
}

html{scroll-behavior:smooth}

body{
background:var(--bg);
color:var(--body);
font-family:var(--font);
font-size:16px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

img{display:block;max-width:100%}

.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}

.site-nav{
background:var(--bg);
border-bottom:1px solid var(--hairline);
height:64px;
position:sticky;
top:0;
z-index:100;
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:64px;
}

.nav-wordmark{
font-size:17px;
font-weight:600;
color:var(--ink);
letter-spacing:-0.01em;
text-decoration:none;
}

.nav-links{
display:flex;
gap:28px;
list-style:none;
}

.nav-links a{
color:var(--body);
font-size:14px;
font-weight:500;
text-decoration:none;
transition:color .15s;
}

.nav-links a:hover{color:var(--ink)}

.nav-toggle{
display:none;
background:none;
border:none;
cursor:pointer;
padding:8px;
color:var(--ink);
}

.hero{
padding:var(--sp) 0;
text-align:center;
}

.pill-label{
display:inline-block;
background:var(--surface-strong);
color:var(--ink);
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
border-radius:9999px;
padding:4px 12px;
margin-bottom:24px;
}

.hero h1{
font-size:clamp(30px,4.5vw,56px);
font-weight:400;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1.15;
max-width:820px;
margin:0 auto 20px;
}

.hero-desc{
font-size:18px;
color:var(--body);
max-width:580px;
margin:0 auto 48px;
line-height:1.6;
}

.hero-image{
width:100%;
max-width:980px;
margin:0 auto;
border-radius:var(--radius-card);
overflow:hidden;
border:1px solid var(--hairline);
}

.hero-image img{
width:100%;
height:460px;
object-fit:cover;
}

.hero-caption{
font-size:12px;
color:var(--muted-soft);
margin-top:8px;
text-align:center;
}

section{padding:var(--sp) 0}

.section-label{
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:16px;
}

.section-title{
font-size:36px;
font-weight:400;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1.2;
margin-bottom:16px;
}

.section-desc{
font-size:16px;
color:var(--body);
max-width:600px;
line-height:1.6;
}

.section-divider{
border:none;
border-top:1px solid var(--hairline);
}

.cards-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:48px;
}

.article-card{
background:var(--card);
border:1px solid var(--hairline);
border-radius:var(--radius-card);
overflow:hidden;
text-decoration:none;
display:flex;
flex-direction:column;
transition:border-color .2s;
}

.article-card:hover{border-color:var(--hairline-strong)}

.article-card img{
width:100%;
height:200px;
object-fit:cover;
}

.article-card-body{
padding:24px;
flex:1;
display:flex;
flex-direction:column;
}

.article-card-tag{
display:inline-block;
background:var(--surface-strong);
color:var(--ink);
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
border-radius:9999px;
padding:4px 10px;
margin-bottom:12px;
align-self:flex-start;
}

.article-card-title{
font-size:17px;
font-weight:600;
color:var(--ink);
line-height:1.35;
margin-bottom:10px;
}

.article-card-excerpt{
font-size:14px;
color:var(--body);
line-height:1.5;
flex:1;
}

.article-card-meta{
margin-top:16px;
font-size:13px;
color:var(--muted);
}

.spotlight{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}

.spotlight-image{
border-radius:var(--radius-card);
overflow:hidden;
border:1px solid var(--hairline);
}

.spotlight-image img{
width:100%;
height:400px;
object-fit:cover;
}

.spotlight-content h2{
font-size:26px;
font-weight:400;
color:var(--ink);
letter-spacing:-0.01em;
line-height:1.3;
margin-bottom:20px;
}

.spotlight-content p{
font-size:16px;
color:var(--body);
line-height:1.7;
margin-bottom:16px;
}

.spotlight-content p:last-child{margin-bottom:0}

.text-link{
color:var(--ink);
font-weight:500;
text-decoration:underline;
text-underline-offset:3px;
font-size:14px;
}

.article-header{
padding:60px 0 40px;
max-width:780px;
margin:0 auto;
}

.article-header h1{
font-size:clamp(26px,3.5vw,42px);
font-weight:400;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1.2;
margin-bottom:16px;
}

.article-meta{
font-size:14px;
color:var(--muted);
margin-bottom:32px;
}

.article-meta span{
display:inline-block;
margin-right:20px;
}

.article-hero-img{
margin-top:24px;
border-radius:var(--radius-card);
overflow:hidden;
border:1px solid var(--hairline);
}

.article-hero-img img{
width:100%;
height:420px;
object-fit:cover;
}

.article-img-caption{
font-size:12px;
color:var(--muted-soft);
margin-top:8px;
}

.article-body{
max-width:780px;
margin:0 auto;
padding:48px 0 80px;
}

.article-body h2{
font-size:22px;
font-weight:600;
color:var(--ink);
margin:44px 0 16px;
}

.article-body h3{
font-size:17px;
font-weight:600;
color:var(--ink);
margin:28px 0 10px;
}

.article-body p{
font-size:16px;
color:var(--body);
line-height:1.75;
margin-bottom:20px;
}

.article-body ul,.article-body ol{
margin:0 0 20px 22px;
}

.article-body li{
font-size:16px;
color:var(--body);
line-height:1.6;
margin-bottom:8px;
}

.article-body a{
color:var(--ink);
text-decoration:underline;
text-underline-offset:3px;
}

.info-box{
background:var(--card);
border:1px solid var(--hairline);
border-radius:var(--radius-card);
padding:24px 28px;
margin:32px 0;
}

.info-box-label{
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:12px;
}

.info-box p{margin-bottom:0}

.related-articles{
border-top:1px solid var(--hairline);
padding-top:48px;
margin-top:0;
padding-bottom:80px;
}

.related-articles h2{
font-size:20px;
font-weight:600;
color:var(--ink);
margin-bottom:28px;
}

.related-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.related-card{
background:var(--card);
border:1px solid var(--hairline);
border-radius:var(--radius-card);
padding:20px;
text-decoration:none;
display:block;
transition:border-color .2s;
}

.related-card:hover{border-color:var(--hairline-strong)}

.related-card-tag{
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:8px;
}

.related-card-title{
font-size:15px;
font-weight:600;
color:var(--ink);
line-height:1.35;
}

.page-header{
padding:60px 0 40px;
border-bottom:1px solid var(--hairline);
margin-bottom:60px;
}

.page-header h1{
font-size:clamp(26px,3.5vw,42px);
font-weight:400;
color:var(--ink);
letter-spacing:-0.02em;
line-height:1.2;
margin-bottom:16px;
}

.page-header-desc{
font-size:18px;
color:var(--body);
max-width:620px;
line-height:1.6;
}

.content-block{
max-width:780px;
}

.content-block h2{
font-size:22px;
font-weight:600;
color:var(--ink);
margin:40px 0 16px;
}

.content-block p{
font-size:16px;
color:var(--body);
line-height:1.75;
margin-bottom:20px;
}

.content-block ul{
margin:0 0 20px 22px;
}

.content-block li{
font-size:16px;
color:var(--body);
line-height:1.6;
margin-bottom:8px;
}

.content-block a{
color:var(--ink);
text-decoration:underline;
text-underline-offset:3px;
}

.content-divider{
border:none;
border-top:1px solid var(--hairline);
margin:56px 0;
}

.two-col{
display:grid;
grid-template-columns:2fr 1fr;
gap:64px;
align-items:start;
}

.contact-form-wrap{
background:var(--card);
border:1px solid var(--hairline);
border-radius:var(--radius-card);
padding:32px;
}

.contact-form-wrap h2{
font-size:20px;
font-weight:600;
color:var(--ink);
margin-bottom:8px;
}

.contact-form-wrap p{
font-size:14px;
color:var(--body);
margin-bottom:24px;
line-height:1.5;
}

.form-group{margin-bottom:18px}

.form-group label{
display:block;
font-size:14px;
font-weight:500;
color:var(--ink);
margin-bottom:6px;
}

.form-group input,
.form-group textarea{
width:100%;
background:var(--bg);
border:1px solid var(--hairline);
border-radius:var(--radius-btn);
padding:10px 14px;
font-size:15px;
font-family:var(--font);
color:var(--ink);
outline:none;
transition:border-color .2s;
}

.form-group input:focus,
.form-group textarea:focus{border-color:var(--ink)}

.form-group textarea{
resize:vertical;
min-height:110px;
}

.btn-submit{
background:var(--ink);
color:var(--bg);
border:none;
border-radius:var(--radius-btn);
padding:11px 24px;
font-size:14px;
font-weight:500;
font-family:var(--font);
cursor:pointer;
transition:opacity .2s;
height:44px;
}

.btn-submit:hover{opacity:.85}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}

.form-status{
margin-top:14px;
font-size:14px;
display:none;
}

.form-status.success{color:var(--success)}
.form-status.error{color:var(--error)}

.site-footer{
background:var(--bg);
border-top:1px solid var(--hairline);
padding:60px 0 40px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:48px;
margin-bottom:48px;
}

.footer-brand-name{
font-size:16px;
font-weight:600;
color:var(--ink);
margin-bottom:12px;
}

.footer-brand-desc{
font-size:14px;
color:var(--muted);
line-height:1.55;
max-width:260px;
}

.footer-col-title{
font-size:12px;
font-weight:600;
letter-spacing:.5px;
text-transform:uppercase;
color:var(--ink);
margin-bottom:16px;
}

.footer-col ul{list-style:none}

.footer-col li{margin-bottom:10px}

.footer-col a{
font-size:14px;
color:var(--body);
text-decoration:none;
transition:color .15s;
}

.footer-col a:hover{color:var(--ink)}

.footer-bottom{
border-top:1px solid var(--hairline);
padding-top:24px;
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-bottom p{
font-size:13px;
color:var(--muted);
}

.cookie-banner{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--ink);
color:var(--bg);
padding:18px 24px;
z-index:999;
display:none;
}

.cookie-inner{
max-width:var(--max-w);
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.cookie-text{
font-size:14px;
line-height:1.55;
flex:1;
min-width:200px;
}

.cookie-text a{
color:var(--muted-soft);
text-decoration:underline;
}

.cookie-actions{
display:flex;
gap:10px;
flex-shrink:0;
}

.cookie-btn{
padding:8px 18px;
border-radius:var(--radius-btn);
font-size:13px;
font-weight:500;
cursor:pointer;
font-family:var(--font);
transition:opacity .2s;
}

.cookie-btn-accept{
background:var(--accent);
color:#fff;
border:1px solid var(--accent);
}

.cookie-btn-reject{
background:transparent;
color:var(--bg);
border:1px solid #807d72;
}

.cookie-btn:hover{opacity:.85}

@media(max-width:1024px){
.cards-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr;gap:36px}
.two-col{grid-template-columns:1fr;gap:40px}
.spotlight{grid-template-columns:1fr;gap:36px}
}

@media(max-width:768px){
:root{--sp:52px}
.nav-links{
display:none;
flex-direction:column;
position:absolute;
top:64px;
left:0;
right:0;
background:var(--bg);
border-bottom:1px solid var(--hairline);
padding:20px 24px;
gap:18px;
}
.nav-links.open{display:flex}
.nav-toggle{display:flex}
.cards-grid{grid-template-columns:1fr}
.related-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:28px}
.footer-bottom{flex-direction:column;gap:10px;text-align:center}
.hero-image img{height:240px}
.spotlight-image img{height:240px}
.article-hero-img img{height:240px}
}

@media(max-width:640px){
.cookie-inner{flex-direction:column;align-items:flex-start}
}