@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{
--canvas:#f7f7f4;
--ink:#26251e;
--primary:#f54e00;
--primary-active:#d04200;
--body:#5a5852;
--body-strong:#26251e;
--muted:#807d72;
--muted-soft:#a09c92;
--on-primary:#ffffff;
--surface-card:#ffffff;
--surface-strong:#e6e5e0;
--hairline:#e6e5e0;
--hairline-soft:#efeee8;
--hairline-strong:#cfcdc4;
--success:#1f8a65;
--error:#cf2d56;
--section:80px;
}

html{font-size:16px;scroll-behavior:smooth}

body{
background-color:var(--canvas);
color:var(--body);
font-family:'Inter',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:16px;
font-weight:400;
line-height:1.5;
}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--primary)}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{color:var(--ink);font-weight:400}

h1{
font-size:clamp(32px,5vw,56px);
line-height:1.1;
letter-spacing:-1.5px;
}

h2{
font-size:clamp(24px,3vw,36px);
line-height:1.2;
letter-spacing:-0.72px;
}

h3{
font-size:22px;
line-height:1.3;
letter-spacing:-0.11px;
}

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

.site-nav{
background:var(--canvas);
border-bottom:1px solid var(--hairline);
height:64px;
display:flex;
align-items:center;
position:sticky;
top:0;
z-index:100;
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
position:relative;
}

.nav-logo{
font-size:20px;
font-weight:600;
color:var(--ink);
letter-spacing:-0.5px;
}

.nav-logo span{color:var(--primary)}

.nav-links{
display:flex;
align-items:center;
gap:32px;
list-style:none;
}

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

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

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

.hero{
padding:var(--section) 0;
border-bottom:1px solid var(--hairline);
}

.hero h1{max-width:760px;margin-bottom:24px}

.hero-desc{
font-size:18px;
color:var(--body);
max-width:560px;
line-height:1.6;
margin-bottom:40px;
}

.hero-image{
margin-top:48px;
border-radius:12px;
overflow:hidden;
border:1px solid var(--hairline);
}

.hero-image img{
width:100%;
max-height:480px;
object-fit:cover;
display:block;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:500;
line-height:1;
padding:10px 18px;
height:40px;
border-radius:8px;
border:none;
cursor:pointer;
transition:background 0.15s;
text-decoration:none;
font-family:inherit;
}

.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-active);color:var(--on-primary)}

.btn-secondary{
background:var(--surface-card);
color:var(--ink);
border:1px solid var(--hairline-strong);
}
.btn-secondary:hover{background:var(--canvas);color:var(--ink)}

.articles-section{padding:var(--section) 0}

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

.article-card{
background:var(--surface-card);
border:1px solid var(--hairline);
border-radius:12px;
overflow:hidden;
display:flex;
flex-direction:column;
transition:border-color 0.15s;
}

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

.article-card-image{
aspect-ratio:16/9;
overflow:hidden;
background:var(--surface-strong);
}

.article-card-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

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

.article-card-tag{
font-size:11px;
font-weight:600;
letter-spacing:0.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:12px;
display:block;
}

.article-card-title{
font-size:18px;
font-weight:600;
color:var(--ink);
line-height:1.4;
margin-bottom:12px;
}

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

.article-card-link{
font-size:14px;
font-weight:500;
color:var(--ink);
display:inline-flex;
align-items:center;
gap:6px;
}

.article-card-link:hover{color:var(--primary)}

.article-page{padding:var(--section) 0}

.article-header{max-width:760px;margin-bottom:40px}

.article-meta{
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
font-size:13px;
color:var(--muted);
flex-wrap:wrap;
}

.article-body{max-width:760px}

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

.article-body h2{
font-size:28px;
color:var(--ink);
margin:48px 0 16px;
font-weight:400;
letter-spacing:-0.5px;
}

.article-body h3{
font-size:20px;
color:var(--ink);
margin:32px 0 12px;
font-weight:600;
}

.article-body ul,.article-body ol{
padding-left:24px;
margin-bottom:24px;
}

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

.article-image{
margin:40px 0;
border-radius:12px;
overflow:hidden;
border:1px solid var(--hairline);
}

.article-image img{
width:100%;
max-height:420px;
object-fit:cover;
display:block;
}

.article-image figcaption{
padding:12px 16px;
font-size:13px;
color:var(--muted);
border-top:1px solid var(--hairline);
background:var(--surface-card);
}

.info-box{
background:var(--surface-card);
border:1px solid var(--hairline);
border-left:3px solid var(--primary);
border-radius:0 8px 8px 0;
padding:20px 24px;
margin:32px 0;
}

.info-box p{margin-bottom:0;font-size:15px}

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

.about-band{
padding:var(--section) 0;
border-top:1px solid var(--hairline);
}

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

.about-band-text h2{margin-bottom:20px}

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

.contact-section{
padding:var(--section) 0;
border-top:1px solid var(--hairline);
}

.contact-form{
max-width:560px;
margin-top:40px;
}

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

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

.form-group input,
.form-group textarea{
width:100%;
background:var(--surface-card);
border:1px solid var(--hairline-strong);
border-radius:8px;
padding:12px 16px;
font-size:16px;
font-family:inherit;
color:var(--ink);
height:44px;
transition:border-color 0.15s;
}

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

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

.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--muted-soft)}

.form-message{
padding:16px;
border-radius:8px;
font-size:14px;
margin-top:16px;
display:none;
}

.form-message.success{
background:#e8f5f0;
color:var(--success);
border:1px solid #b3ddd1;
}

.form-message.error{
background:#fce8ec;
color:var(--error);
border:1px solid #f0b8c3;
}

.badge{
display:inline-flex;
align-items:center;
background:var(--surface-strong);
color:var(--ink);
font-size:11px;
font-weight:600;
letter-spacing:0.88px;
text-transform:uppercase;
padding:4px 10px;
border-radius:9999px;
}

.site-footer{
background:var(--canvas);
border-top:1px solid var(--hairline);
padding:64px 0 48px;
}

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

.footer-brand .nav-logo{
font-size:18px;
display:block;
margin-bottom:16px;
}

.footer-brand p{
font-size:14px;
color:var(--body);
line-height:1.6;
max-width:280px;
}

.footer-col h4{
font-size:13px;
font-weight:600;
color:var(--ink);
margin-bottom:16px;
letter-spacing:0.2px;
}

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

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

.footer-col ul li a{font-size:14px;color:var(--body)}
.footer-col ul li a:hover{color:var(--ink)}

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

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

.footer-bottom-links{display:flex;gap:24px}

.footer-bottom-links a{font-size:13px;color:var(--muted)}
.footer-bottom-links a:hover{color:var(--ink)}

#cookie-banner{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--ink);
color:var(--canvas);
padding:20px 24px;
z-index:1000;
display:none;
}

.cookie-inner{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
}

.cookie-text{
font-size:14px;
color:#e6e5e0;
max-width:680px;
line-height:1.5;
}

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

.cookie-buttons{display:flex;gap:12px;flex-shrink:0}

.cookie-btn{
font-size:13px;
font-weight:500;
padding:8px 16px;
border-radius:8px;
border:none;
cursor:pointer;
height:36px;
font-family:inherit;
}

.cookie-btn-accept{background:var(--primary);color:#fff}
.cookie-btn-reject{background:transparent;color:var(--canvas);border:1px solid rgba(255,255,255,0.3)}

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

.page-header h1{max-width:680px}

.page-header .article-meta{margin-top:16px;margin-bottom:0}

.page-content{
padding:var(--section) 0;
max-width:760px;
}

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

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

.page-content ul{
padding-left:24px;
margin-bottom:20px;
}

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

.breadcrumb{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:var(--muted);
margin-bottom:24px;
flex-wrap:wrap;
}

.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--muted-soft)}

@media(max-width:768px){
.nav-links{
display:none;
position:absolute;
top:64px;
left:-24px;
right:-24px;
background:var(--canvas);
border-bottom:1px solid var(--hairline);
flex-direction:column;
gap:0;
padding:8px 24px 16px;
}

.nav-links.open{display:flex}

.nav-links li{
padding:12px 0;
border-bottom:1px solid var(--hairline-soft);
}

.nav-toggle{display:flex}

.articles-grid{grid-template-columns:1fr}

.about-band-inner{
grid-template-columns:1fr;
gap:32px;
}

.footer-inner{
grid-template-columns:1fr 1fr;
gap:32px;
}

.hero-desc{font-size:16px}
}

@media(max-width:480px){
.footer-inner{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;align-items:flex-start}
.cookie-inner{flex-direction:column;align-items:flex-start}
}

@media(min-width:769px) and (max-width:1024px){
.articles-grid{grid-template-columns:1fr 1fr}
.footer-inner{grid-template-columns:1fr 1fr;gap:32px}
}