/* Newsreader (OFL) + Fira Mono - self-hosted */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("../font/newsreader-regular.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("../font/newsreader-600.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("../font/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family:"Fira Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../font/fira-mono-regular.woff2") format("woff2"); }
@font-face { font-family:"Fira Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("../font/fira-mono-700.woff2") format("woff2"); }

:root {
  --bg:#f4f1ea; --ink:#1a1a1a; --body:#2b2b2b; --meta:#6b6459;
  --amber:#a8631b; --rule:#d8d2c4;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Fira Mono",Menlo,Monaco,"Courier New",monospace;
  --measure:38rem;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--body);
  font-family:var(--serif); font-size:20px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.5rem;}

/* masthead */
.masthead{border-bottom:1px solid var(--rule); margin-top:2.5rem; padding-bottom:.9rem;}
.prompt{font-family:var(--mono); font-size:.82rem; color:var(--meta); letter-spacing:.01em;}
.prompt .site{color:var(--ink); text-decoration:none; font-weight:700;}
.prompt .site:hover{color:var(--amber);}
.prompt nav{display:inline;}
.prompt nav a{color:var(--meta); text-decoration:none; margin-left:1.1rem;}
.prompt nav a:hover{color:var(--amber);}
.tagline{font-family:var(--mono); font-size:.78rem; color:var(--meta); margin-top:.7rem;}

/* article */
article{padding-top:2.6rem;}
.post-date{font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.13em; color:var(--meta);}
h1.title{font-family:var(--serif); font-weight:600; font-size:2.6rem; line-height:1.12; color:var(--ink); letter-spacing:-.012em; margin:.6rem 0 1.4rem;}
.byline{font-family:var(--mono); font-size:.76rem; color:var(--meta); margin-bottom:2.2rem;}
.byline a{color:var(--amber); text-decoration:none;}
article p{margin:0 0 1.5rem;}
article p:first-of-type::first-letter{font-weight:600; color:var(--ink);}
article p.beat{color:var(--ink); font-style:italic;}
a{color:var(--amber); text-underline-offset:3px; text-decoration-thickness:1px;}

/* rich content elements */
article h2{font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1.2; color:var(--ink); margin:2.6rem 0 1rem;}
article h3{font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--ink); margin:2rem 0 .8rem;}
article ul,article ol{margin:0 0 1.5rem; padding-left:1.4rem;}
article li{margin:0 0 .5rem;}
article blockquote{margin:1.8rem 0; padding-left:1.2rem; border-left:2px solid var(--amber); color:var(--ink); font-style:italic;}
article img{max-width:100%; height:auto; display:block; margin:1.8rem 0;}
article figure{margin:1.8rem 0;}
article figure figcaption{font-family:var(--mono); font-size:.72rem; color:var(--meta); margin-top:.5rem;}
article hr{border:0; height:1px; background:var(--rule); width:4rem; margin:2.6rem 0;}
article code{font-family:var(--mono); font-size:.85em; background:#ece7da; padding:.1em .35em; border-radius:2px;}
article pre{font-family:var(--mono); font-size:.8rem; background:#ece7da; padding:1rem; overflow:auto; line-height:1.5;}
article pre code{background:none; padding:0;}
hr.scene{border:0; height:1px; background:var(--rule); width:4rem; margin:2.6rem 0;}

/* audio */
.audio-player{margin:0 0 2rem;}
.audio-player audio{width:100%;}

/* tags */
.tags{font-family:var(--mono); font-size:.74rem; color:var(--meta); margin-top:3rem; padding-top:1.1rem; border-top:1px solid var(--rule);}
.tags a{color:var(--meta); text-decoration:none; margin-right:.85rem;}
.tags a::before{content:"#"; color:var(--amber);}
.tags a:hover{color:var(--amber);}

/* posts list */
.section-label{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.15em; color:var(--meta); margin:4.5rem 0 0; padding-bottom:.6rem; border-bottom:2px solid var(--ink);}
.entry{padding:1.7rem 0; border-bottom:1px solid var(--rule);}
.entry .post-date{display:block; margin-bottom:.35rem;}
.entry h2{font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.2; margin:0 0 .5rem;}
.entry h2 a{color:var(--ink); text-decoration:none;}
.entry h2 a:hover{color:var(--amber);}
.entry p{margin:0; font-size:1.02rem; color:var(--body);}
.all-posts{font-family:var(--mono); font-size:.82rem; margin:1.8rem 0 0;}
.all-posts a{text-decoration:none;}

/* pagination */
.pagination{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.78rem; margin:2.5rem 0 0;}
.pagination a{text-decoration:none;}
.pagination .page-number{color:var(--meta);}

/* tag cloud */
.tag-cloud{list-style:none; padding:0; margin:1.5rem 0 0; font-family:var(--mono); font-size:.85rem;}
.tag-cloud li{display:inline-block; margin:0 1.1rem .6rem 0;}
.tag-cloud a{text-decoration:none;}
.tag-cloud .count{color:var(--meta);}

/* footer */
footer{margin-top:5rem; padding:1.6rem 0 5rem; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.74rem; line-height:1.85; color:var(--meta);}
footer .name{color:var(--ink); font-weight:700; letter-spacing:.04em;}
footer a{color:var(--amber); text-decoration:none;}
footer .quote{font-style:italic;}

@media (max-width:600px){
  body{font-size:18px;}
  h1.title{font-size:2rem;}
  article h2{font-size:1.4rem;}
}