/*
Theme Name: Art och Lingua
Description: Custom theme replicating the look of the original Blogger blog (white, red accent, Open Sans headings, Cardo body).
Version: 1.0
Text Domain: artochlingua
*/
:root{--red:#d52c1f;--ink:#292929;--muted:#737877;--pink:#ffdde1;--soft:#f7f7f7}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:400 20px/1.9 Cardo,serif}
a{color:var(--red);text-decoration:none}a:hover{color:var(--red);text-decoration:underline}
img{max-width:100%;height:auto}
.container{max-width:1000px;margin:0 auto;padding:0 24px}
.ui,.site-title,.nav a,.byline,.feed-message,.pager,.labels,.comment-meta,.widget-title{font-family:'Open Sans',sans-serif}

/* header */
.site-header{background:#fff;border-bottom:1px solid #eee}
.site-header .top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 12px}
.site-title{margin:0;font:700 24px/24px 'Open Sans',sans-serif;text-transform:uppercase}
.site-title a{color:#000}.site-title a:hover{text-decoration:none}
.tagline{margin:8px 0 0;font:italic 400 14px/1.6 'Open Sans',sans-serif;color:var(--muted);max-width:676px}
.search-form{display:flex;border-bottom:1px solid #ccc}
.search-form input[type=search]{border:0;outline:0;background:none;font:400 14px 'Open Sans',sans-serif;padding:8px 4px;width:150px}
.search-form button{border:0;background:none;color:var(--red);font:700 13px 'Open Sans',sans-serif;cursor:pointer;text-transform:uppercase}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav a{display:block;color:var(--red);font:700 14px/48px 'Open Sans',sans-serif;padding:0 12px;text-transform:uppercase}
.nav li:first-child a{padding-left:0}

/* home / archive list */
.feed-message{color:rgba(0,0,0,.54);font:600 16px 'Open Sans',sans-serif;margin:48px 0 40px}
.post-item{display:flex;gap:32px;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid #eee}
.post-item .thumb{flex:0 0 256px;height:256px;background:#000 center/cover no-repeat}
.post-item .body{flex:1;min-width:0}
.post-item h2{margin:0 0 8px;font:700 24px/1.33 'Open Sans',sans-serif}
.byline{font:600 14px 'Open Sans',sans-serif;color:rgba(0,0,0,.54);margin-bottom:12px}
.post-item .excerpt{font-size:18px;line-height:1.7;margin:0}
.more{display:inline-block;margin-top:12px;font:600 14px 'Open Sans',sans-serif;text-transform:uppercase}
.pager{display:flex;justify-content:space-between;margin:0 0 64px;font:600 14px 'Open Sans',sans-serif;text-transform:uppercase}
.pager .older{margin-left:auto}

/* single */
.hero{background:var(--pink);padding:96px 0 64px}
.hero h1{margin:0;color:var(--red);font:750 48px/1.4 'Open Sans',sans-serif}
.hero .byline{margin-top:16px;font-size:14px}
.entry{padding:48px 24px;max-width:820px;margin:0 auto;font:400 22px/2 Cardo,serif}
.entry>*{margin-top:0;margin-bottom:1.2em}
.entry img{display:block;margin:1em auto}
.entry blockquote{margin:1.5em 0;padding-left:24px;border-left:4px solid var(--pink);font:italic 600 22px/1.6 'Open Sans',sans-serif}
.entry h2,.entry h3,.entry h4{font-family:'Open Sans',sans-serif;line-height:1.4}
.entry iframe{max-width:100%}
.labels{max-width:820px;margin:0 auto 48px;padding:0 24px;font:400 14px/2 'Open Sans',sans-serif}
.labels strong{font-weight:600;color:var(--ink);margin-right:8px}
.labels a{margin-right:12px}

/* comments */
.comments{max-width:820px;margin:0 auto;padding:0 24px 64px;font-family:'Open Sans',sans-serif}
.comments h3{font:600 16px 'Open Sans',sans-serif;color:rgba(0,0,0,.54)}
.comments ol{list-style:none;padding:0;margin:0}.comments ol ol{padding-left:32px}
.comment{padding:16px 0;border-bottom:1px solid #eee;font-size:16px;line-height:1.5}
.comment .comment-meta{font-size:14px;color:rgba(0,0,0,.54)}.comment .comment-meta b{color:var(--ink)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:10px;border:1px solid #ccc;font:400 16px 'Open Sans',sans-serif}
.comment-form input[type=submit]{background:var(--red);color:#fff;border:0;padding:10px 24px;font:700 14px 'Open Sans',sans-serif;text-transform:uppercase;cursor:pointer}

.site-footer{background:var(--soft);padding:32px 0;text-align:center;font:400 14px 'Open Sans',sans-serif;color:var(--muted)}

@media(max-width:968px){body{font-size:16.8px}.entry{font-size:18px}.hero{padding:56px 0 40px}.hero h1{font-size:30px}.post-item h2{font-size:22px}}
@media(max-width:600px){.post-item{flex-direction:column;gap:16px}.post-item .thumb{flex:none;width:100%;height:220px}.site-header .top{flex-direction:column;align-items:flex-start}}