@font-face{font-family:"IM Fell English";src:url(/fonts/im-fell-english-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(/fonts/im-fell-english-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Gruppo";src:url(/fonts/gruppo-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--void:#0B0B08;--panel:#12150F;--oxide:#C0442A;--rust:#A5421F;--amber:#D9962B;--cream:#EADFB4;--grime:#3A2C1E;--mute:#A59C7A;--moss:#3E7B3A;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--void);scrollbar-color:var(--rust) var(--void)}
body{position:relative;margin:0;min-height:100vh;color:var(--cream);font:1.2rem/1.6 "IM Fell English","Palatino Linotype",Georgia,serif;
background:radial-gradient(ellipse at 10% 0,rgba(80,40,18,.55) 0,transparent 42%),radial-gradient(ellipse at 95% 45%,rgba(40,70,32,.35) 0,transparent 45%),radial-gradient(ellipse at 20% 100%,rgba(70,34,16,.45) 0,transparent 50%),var(--void);background-attachment:fixed}
::selection{background:var(--oxide);color:#fff}

/* cracked, grimy surface over everything */
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .56 0 0 0 0 .38 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-blend-mode:normal}

header,main{position:relative;z-index:2;max-width:46rem;margin:0 auto;padding:0 1.25rem}
header{padding-top:3.2rem;padding-bottom:1.3rem;border-bottom:4px double var(--grime)}
/* rust stains running down from the top */
header::before{content:"";position:absolute;z-index:-1;inset:0 0 -2rem;pointer-events:none;
background:radial-gradient(ellipse at 28% 35%,rgba(140,58,24,.55),transparent 60%),repeating-linear-gradient(90deg,transparent 0 23px,rgba(150,64,28,.32) 23px 25px,transparent 25px 41px,rgba(150,64,28,.2) 41px 42px);
-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.name{display:inline-block;padding-top:1.6rem;font:400 clamp(2.8rem,11vw,5.2rem)/1.5 "Gruppo","DejaVu Sans",Arial,sans-serif;letter-spacing:.06em;text-decoration:none;overflow:visible;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(0deg,var(--cream) 0 3px,transparent 3px 5px);-webkit-background-clip:text;background-clip:text}

a{color:var(--amber);text-underline-offset:.2em}
a:hover{color:#fff}
a:focus-visible,audio:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

nav{font-family:"Gruppo",Arial,sans-serif;letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin-top:1.3rem;font-size:1.3rem}
nav a{color:var(--cream);text-decoration:none;padding-bottom:.1rem;border-bottom:3px solid transparent}
nav a:hover{color:var(--amber)}
nav a[aria-current="page"]{border-bottom-color:var(--oxide)}

/* each entry is a framed cover */
.entry{position:relative;display:flex;flex-direction:column;margin:2.4rem 0;padding:1.6rem 1.6rem 0;border:4px solid var(--oxide);border-radius:1.6rem;
background:linear-gradient(180deg,rgba(62,123,58,.16),transparent 45%),var(--panel);box-shadow:0 0 0 3px var(--void),0 0 0 4px var(--grime)}
.body{order:1;min-width:0}

/* banner across the bottom edge of the frame */
.tag{order:2;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1.2rem calc(-1.6rem - 4px) 1.3rem;padding:.7rem 1.6rem;
background:linear-gradient(var(--rust) 0 5px,var(--amber) 5px 8px,var(--cream) 8px calc(100% - 8px),var(--amber) calc(100% - 8px) calc(100% - 5px),var(--rust) calc(100% - 5px));
color:var(--rust);font:400 1.15rem/1.2 "Gruppo",Arial,sans-serif;letter-spacing:.08em}
.tag span{order:-1;font-size:1.45rem}
.tag time{font-size:1.05rem}

h1,h2,h3,h4{line-height:1.15;letter-spacing:-.01em;margin:0 0 .7rem;font-family:"Gruppo",Arial,sans-serif;font-weight:400;letter-spacing:.04em}
h1{font-size:2.8rem;color:var(--cream);text-shadow:2px 2px 0 var(--grime)}
h2{font-size:2.1rem}
h2 a{color:var(--cream);text-decoration:none;text-shadow:2px 2px 0 var(--grime)}
h2 a:hover{color:var(--amber)}
p{margin:0 0 1rem;max-width:62ch}

/* pictures: rounded, with a printed halftone screen on top */
figure.art{position:relative;margin:.6rem 0 1.2rem;border-radius:1rem;overflow:hidden;background:var(--void)}
figure.art img{display:block;width:100%;height:auto;margin:0;filter:contrast(1.08) saturate(.9)}
figure.art::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle,rgba(8,10,6,.5) 0 .9px,transparent 1.4px) 0 0/4px 4px,linear-gradient(180deg,transparent 60%,rgba(8,10,6,.45))}
.body img{max-width:100%;height:auto;border-radius:.8rem}
audio{width:100%;margin:.6rem 0 1.2rem}
.back{margin-top:2rem}
.empty{padding:2rem 0;color:var(--mute)}
.plain{padding:2rem 0}

@media (max-width:36rem){.entry{padding:1.2rem 1.1rem 0}.tag{margin-left:calc(-1.1rem - 4px);margin-right:calc(-1.1rem - 4px);padding-left:1.1rem;padding-right:1.1rem}}

.from{font-family:"Gruppo",Arial,sans-serif;letter-spacing:.06em;color:var(--mute);font-size:1.2rem}