:root{
--container-w: 720px;
--accent: #d99a0f;
--muted: #d99a0f;
--paper: #f7f3ef;
--text: #3a302c;
}
html,body{
height:100%;
margin:0;
font-family: "Open Sans", Arial, sans-serif;
background: #ffffff;
color:var(--text);
}
.wrap{
width:100%;
min-height:100%;
display:flex;
align-items:flex-start;
justify-content:center;
padding:40px 10px;
box-sizing:border-box;
}

.site{
width:var(--container-w);
background-color: var(--paper);
border: 1px solid rgba(0,0,0,0.06);
}
header{
padding:1px;
}
header .title{
font-family: "Playfair Display", serif;
font-size:36px;
color:#1a1a1a;
margin:0 0 10px 0;
}
nav{
background: var(--accent);
padding:12px 18px;
margin-top:10px;
}
nav ul{
list-style:none;
margin:0;
padding:0;
display:flex;
gap:28px;
}
nav a{
color:#fff;
text-decoration:none;
font-weight:600;
font-size:13px;
text-transform:lowercase;
}
.hero{
display:block;
width:100%;
height:220px;
object-fit:cover;
margin:18px 0;
}
.content{
display:grid;
grid-template-columns: 1fr 2fr;
gap:28px;
padding:0 36px 36px 36px;
}
.sidebar{
font-size:14px;
}
.sidebar h3{
font-family:"Playfair Display", serif;
font-size:18px;
margin:6px 0 12px 0;
}
.sidebar ul{
list-style:none;
margin:0 0 20px 0;
padding:0;
}
.sidebar li{
margin:8px 0;
padding-left:10px;
}
.sidebar a{
color:var(--accent);
text-decoration:none;
font-size:13px;
}
.sidebar .widget{
padding-bottom:12px;
border-bottom:1px solid rgba(0,0,0,0.03);
margin-bottom:18px;
}
.sidebar p.small{
color:var(--muted);
font-size:13px;
line-height:1.4;
}
.main h2.post-title{
font-family:"Playfair Display", serif;
font-size:28px;
margin:0 0 6px 0;
}
.main h3{
font-family:"Playfair Display", serif;
font-size:22px;
margin:18px 0 6px 0;
}
.meta{
font-size:12px;
color:var(--muted);
margin-bottom:14px;
}
.post{
margin-bottom:30px;
padding-bottom:10px;
border-bottom:1px solid rgba(0,0,0,0.04);
}
.post p{
color:#6b635e;
line-height:1.6;
font-size:14px;
}
.read-more{
display:inline-block;
margin-top:12px;
padding:6px 12px;
font-size:12px;
border:1px solid var(--muted);
background:transparent;
color:#d99a0f;
text-decoration:none;
border-radius:2px;
margin-left: 320px;
}


footer{
font-size:12px;
color:var(--muted);
padding:18px 36px;
border-top:1px solid rgba(0,0,0,0.03);
text-align:center;
}
footer a{
color:var(--accent);
text-decoration:none;
}

@media (max-width:760px){
.site{ width:95%; }
.content{ grid-template-columns: 1fr; }
nav ul{ gap:16px; flex-wrap:wrap; }
.hero{ height:180px; }
}
.class{
    color:#d99a0f ;
}