@import url("assets/fonts.css");

body{background-color:#f9f9f9;width:100%;height:100%;margin:0}
.index-container{margin:50px auto;width:60%;max-width:860px;padding:0}
@media (max-width:900px){.index-container{width:85%}}
@media (max-width:600px){.index-container{width:100%;margin:50px auto;padding:0 40px;box-sizing:border-box}}
@media (max-width:500px){.index-container{padding:0 20px}}
.index-container h2{font-family:"Montserrat",sans-serif;font-weight:700;margin:0 0 12px;font-size:1.1rem}
.index-container .posts h2{margin-top:48px;width:100px;padding-right:20px;text-align:right;box-sizing:content-box}
.index-container .hero{margin-bottom:0}
.index-container .hero-row{display:flex;align-items:flex-start;gap:32px;overflow:visible}
.index-container .hero-avatar,.index-container #profile-image{flex-shrink:0;width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top center;margin:0}
.index-container .hero-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;overflow:visible}
.index-container .introduction{max-width:700px;font-family:"Merriweather",serif;line-height:1.8rem;font-weight:300;margin-bottom:20px}
.index-container .introduction span{display:block;font-size:0.9rem;margin:0 0 12px}
.index-container .introduction span:last-child{margin-bottom:0}
.index-container .social-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:2px 0 6px;overflow:visible}
.index-container .social-link{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:44px;height:44px;padding:0;border-radius:50%;border:none;background:#fff;color:#333;box-shadow:0 0 0 1px #ddd;text-decoration:none}
.index-container .social-link svg{display:block;width:18px;height:18px;fill:currentColor;flex-shrink:0}
.index-container .subscribe-options{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0}
.index-container .subscribe-options #subscribe-button,.index-container .subscribe-options #rss-button{border-radius:3px;font-family:"Montserrat",sans-serif;font-size:1.05rem;padding:0.5em 1em;font-weight:600;text-decoration:none}
.index-container .subscribe-options #subscribe-button{border:1px solid #f42c56;background-color:#f42c56;color:#fff}
.index-container .subscribe-options #rss-button{border:none;background-color:#fff;color:#f42c56;box-shadow:inset 0 0 0 3px #f42c56}
.index-container .post-list{display:flex;flex-direction:column}
.index-container .post-list .post{display:flex;margin-top:8px}
.index-container .post-list .post .post-date{min-width:100px;padding-right:20px;position:relative;top:-3px;text-align:right;font-family:"Merriweather",serif;font-size:0.8rem;font-weight:300;line-height:1.8rem;color:#beb8ba;white-space:nowrap}
.index-container .post-list .post .post-title{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.1rem}
.index-container .post-title > span{color:#222;text-decoration:none;border-bottom:1px dashed #aaa}
@media (max-width:500px){.index-container .hero-row{flex-direction:column;align-items:center;gap:24px}.index-container .hero-copy{align-self:stretch;width:100%}.index-container .introduction{margin-bottom:16px}.index-container .social-row{justify-content:center;margin-bottom:16px}.index-container .subscribe-options{flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px}.index-container .subscribe-options #subscribe-button,.index-container .subscribe-options #rss-button{display:block;box-sizing:border-box;width:100%;text-align:center}.index-container .posts h2{width:auto;padding-right:0;text-align:left}}
@media (max-width:500px){.index-container .post-list .post{flex-direction:column}.index-container .post-list .post .post-date{text-align:left}.index-container .post-list .post .post-title{margin-bottom:20px}}

.index-container .introduction .visual-link{display:inline;margin:0;border-bottom:1px dashed #aaa;color:#222}
