@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;
--body:#5a5852;
--muted:#807d72;
--muted-soft:#a09c92;
--accent:#f54e00;
--card:#ffffff;
--hairline:#e6e5e0;
--hairline-soft:#efeee8;
--hairline-strong:#cfcdc4;
--surface-strong:#e6e5e0;
--success:#1f8a65;
--error:#cf2d56;
--max:1200px;
--section:80px;
}

html{scroll-behavior:smooth}

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

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

h1,h2,h3,h4{color:var(--ink);font-weight:400}
h1{font-size:clamp(32px,5vw,72px);line-height:1.1;letter-spacing:-2px}
h2{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-0.72px}
h3{font-size:clamp(18px,2.5vw,26px);line-height:1.25;letter-spacing:-0.325px}
h4{font-size:18px;line-height:1.4;font-weight:600}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}

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

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

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

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

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

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

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

.nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:4px;
}

.nav-toggle span{
display:block;
width:22px;
height:2px;
background:var(--ink);
transition:all .2s;
border-radius:1px;
}

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

.hero-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center;
}

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

.hero-text h1{margin-bottom:20px}
.hero-text p{font-size:16px;color:var(--body);max-width:480px;line-height:1.7}

.hero-image{border-radius:12px;overflow:hidden;border:1px solid var(--hairline)}
.hero-image img{width:100%;height:420px;object-fit:cover}

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

.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:16px}

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

.article-card{
background:var(--card);
border:1px solid var(--hairline);
border-radius:12px;
overflow:hidden;
transition:border-color .15s;
}

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

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

.article-card-body{padding:20px}

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

.article-card-body h3{
font-size:19px;
margin-bottom:10px;
letter-spacing:-.2px;
}

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

.read-link{
font-size:13px;
font-weight:500;
color:var(--muted);
border-bottom:1px solid var(--hairline-strong);
padding-bottom:2px;
display:inline-block;
transition:color .15s, border-color .15s;
}

.read-link:hover{color:var(--ink);border-color:var(--ink)}

.info-band{
background:var(--card);
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
padding:var(--section) 0;
}

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

.info-band h2{margin-bottom:20px}
.info-band p{color:var(--body);line-height:1.7;margin-bottom:16px}

.article-header{padding:56px 0 36px;border-bottom:1px solid var(--hairline)}
.article-header h1{max-width:760px;margin-bottom:16px}
.article-meta{color:var(--muted);font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.article-meta span::before{content:'·';margin-right:16px}
.article-meta span:first-child::before{content:none}

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

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

.article-layout{
display:grid;
grid-template-columns:2fr 1fr;
gap:56px;
padding-bottom:var(--section);
padding-top:40px;
}

.article-content h2{
font-size:24px;
margin:36px 0 14px;
letter-spacing:-.3px;
}

.article-content h3{
font-size:19px;
margin:28px 0 10px;
letter-spacing:-.1px;
}

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

.article-content ul,.article-content ol{
margin:0 0 18px 22px;
}

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

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

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

.img-caption{
font-size:13px;
color:var(--muted);
padding:10px 14px;
background:var(--canvas);
line-height:1.4;
}

.article-sidebar{}

.sidebar-card{
background:var(--card);
border:1px solid var(--hairline);
border-radius:12px;
padding:22px;
margin-bottom:20px;
}

.sidebar-card-title{
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:14px;
display:block;
}

.fact-list{list-style:none;margin:0 !important}
.fact-list li{
display:flex;
gap:10px;
padding:8px 0;
border-bottom:1px solid var(--hairline);
font-size:14px;
color:var(--body);
}
.fact-list li:last-child{border-bottom:none}
.fact-label{font-weight:500;color:var(--ink);min-width:84px;flex-shrink:0}

.sidebar-nav-list{list-style:none;margin:0 !important}
.sidebar-nav-list li{padding:8px 0;border-bottom:1px solid var(--hairline)}
.sidebar-nav-list li:last-child{border-bottom:none}
.sidebar-nav-list a{font-size:14px;color:var(--body);line-height:1.4;display:block}
.sidebar-nav-list a:hover{color:var(--ink)}

.ext-refs{margin-top:40px;padding-top:24px;border-top:1px solid var(--hairline)}
.ext-refs h4{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ext-refs ul{list-style:none;margin:0 !important}
.ext-refs li{margin-bottom:8px}
.ext-refs a{font-size:13px;color:var(--muted-soft);text-decoration:underline;text-underline-offset:3px}
.ext-refs a:hover{color:var(--body)}

.page-header{padding:56px 0 36px;border-bottom:1px solid var(--hairline)}
.page-header h1{margin-bottom:14px}
.page-header .lead{color:var(--body);max-width:680px;font-size:16px;line-height:1.7}

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

.page-text{max-width:760px}
.page-text h2{font-size:22px;margin:36px 0 12px;letter-spacing:-.2px}
.page-text h3{font-size:17px;margin:24px 0 8px;font-weight:500}
.page-text p{color:var(--body);line-height:1.75;margin-bottom:16px;font-size:16px}
.page-text ul,.page-text ol{margin:0 0 16px 22px}
.page-text li{color:var(--body);line-height:1.7;margin-bottom:6px;font-size:16px}

.about-grid{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:start}

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

.contact-intro{margin-bottom:36px}
.contact-intro h2{margin-bottom:12px}
.contact-intro p{color:var(--body);max-width:600px}

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

.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(--canvas);
border:1px solid var(--hairline);
border-radius:8px;
padding:11px 14px;
font-size:15px;
font-family:inherit;
color:var(--ink);
transition:border-color .15s;
height:44px;
appearance:none;
}

.form-group textarea{height:110px;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);
}

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

.btn-submit:hover{opacity:.82}
.btn-submit:disabled{opacity:.45;cursor:not-allowed}

.form-success{
display:none;
background:#f0fdf4;
border:1px solid #bbf7d0;
border-radius:8px;
padding:14px 16px;
color:var(--success);
font-size:14px;
margin-top:14px;
line-height:1.5;
}

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

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

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

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

.footer-col h4{
font-size:11px;
font-weight:600;
letter-spacing:.88px;
text-transform:uppercase;
color:var(--muted);
margin-bottom:14px;
}

.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a{font-size:14px;color:var(--body);transition:color .15s}
.footer-col a:hover{color:var(--ink)}

.footer-bottom{
border-top:1px solid var(--hairline);
padding-top:20px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:8px;
}

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

.cookie-banner{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:var(--ink);
color:var(--canvas);
border-radius:12px;
padding:18px 22px;
max-width:580px;
width:calc(100% - 32px);
display:flex;
gap:14px;
align-items:center;
justify-content:space-between;
z-index:9999;
font-size:14px;
line-height:1.5;
}

.cookie-banner.hidden{display:none}

.cookie-text{flex:1}
.cookie-text a{color:var(--canvas);text-decoration:underline;text-underline-offset:3px}

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

.btn-cookie-accept{
background:var(--accent);
color:#fff;
border:none;
border-radius:8px;
padding:8px 14px;
font-size:13px;
font-weight:500;
cursor:pointer;
white-space:nowrap;
font-family:inherit;
}

.btn-cookie-reject{
background:transparent;
color:var(--canvas);
border:1px solid rgba(255,255,255,.28);
border-radius:8px;
padding:8px 14px;
font-size:13px;
font-weight:500;
cursor:pointer;
white-space:nowrap;
font-family:inherit;
}

@media(max-width:1024px){
.articles-grid{grid-template-columns:repeat(2,1fr)}
.article-layout{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.info-band-inner{grid-template-columns:1fr}
}

@media(max-width:768px){
:root{--section:52px}
.nav-toggle{display:flex}
.nav-links{
display:none;
position:absolute;
top:64px;
left:0;
right:0;
background:var(--canvas);
border-bottom:1px solid var(--hairline);
flex-direction:column;
gap:0;
padding:8px 24px 16px;
z-index:999;
}
.nav-links.open{display:flex}
.nav-links li{padding:11px 0;border-bottom:1px solid var(--hairline-soft)}
.nav-links li:last-child{border-bottom:none}
.site-nav{position:relative}
.hero-inner{grid-template-columns:1fr;gap:32px}
.hero-image{order:-1}
.hero-image img{height:280px}
.about-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:28px}
.cookie-banner{flex-direction:column;align-items:flex-start}
.cookie-actions{width:100%}
.btn-cookie-accept,.btn-cookie-reject{flex:1;text-align:center}
}

@media(max-width:640px){
:root{--section:40px}
h1{letter-spacing:-1px}
.articles-grid{grid-template-columns:1fr}
.article-hero-image img{height:240px}
}