<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom">
	<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
	<xsl:template match="/atom:feed">
		<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
				<title><xsl:value-of select="atom:title"/> Feed</title>
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
				<link rel="preload" as="font" type="font/woff2" href="https://opus.ing/_theme/2024-1/f/A.woff2" crossorigin="true"/>
				<link rel="preload" as="font" type="font/woff2" href="https://opus.ing/_theme/2024-1/f/Ai.woff2" crossorigin="true"/>
				
				<style type="text/css">
				
				@font-face{font-family:'Alegreya';font-weight:1 999;font-display:swap;src:url('/_theme/2024-1/f/A.woff2') format('woff2')}
				@font-face{font-family:'Alegreya';font-style:italic;font-weight:1 999;font-display:swap;src:url('/_theme/2024-1/f/Ai.woff2') format('woff2')}
				
				*,
				*:before,
				*:after {
					box-sizing: inherit;
				}

				html {
					box-sizing: border-box;
					font-size: 10px;
					color-scheme: light dark;
					overscroll-behavior-y: none;
				}
				
				body {
					margin: 0 2rem 2.8rem;
					font-size: 2rem;
					line-height: 1.7;
					background-color: light-dark(#fff,#222427);
					font-family: Alegreya,serif;
					color: light-dark(#222427,#e0e2e6);
					text-rendering: optimizeLegibility;
					overscroll-behavior-y: none;
				}
				
				p {
					margin-block: 0 2.8rem;
					text-wrap: pretty;
				}
				
				p:last-child {
					margin-block: 0;
				}
				
				a:link,
				a:visited {
					color: light-dark(#437689, #99bfcc);
					transition: color .3s, text-decoration-color .3s;
				}
				
				a:hover,
				a:active,
				a:focus {
					color: light-dark(#c23f38, #d77a75);
				}
				
				svg {
					display: flex;
					inline-size: 100%;
					block-size: 100%;
					transition: fill .3s;
				}
				
				.alert {
					inline-size: 100%;
					max-inline-size: 50rem;
					margin: 0 auto 4.2rem;
					border-radius: 0 0 6px 6px;
					background-color: light-dark(#e0e2e6, #424448);
					padding: 1rem 1.5rem;
					font: 500 1.4rem/1.6 'Avenir Next','Segoe UI',sans-serif;
					text-align: center;
					text-wrap: pretty;
				}
				
				.alert a:link,
				.alert a:visited {
					color: light-dark(#424448,#e0e2e6);
					text-decoration-color: light-dark(#a3a4a7,#a3a4a7);
					text-underline-offset: 2px;
				}
				
				.alert a:hover,
				.alert a:active,
				.alert a:visited {
					color: light-dark(#111314, #fff);
					text-decoration-color: light-dark(#111314, #fff);
				}
				
				.intro {
					display: flex;
					align-items: center;
					gap: 2.8rem;
					inline-size: 100%;
					max-inline-size: 72rem;
					margin: 0 auto;
				}
				
				.intro figure {
					display: block;
					margin: 0;
				}
				
				.intro figure a {
					display: block;
					inline-size: 100px;
					block-size: 107.5px;
					color: light-dark(#222427,#e0e2e6);
				}
				
				.intro p {
					flex: 1;
				}
				
				.entryDate,
				.entrySummary {
					font-weight: 500;
					font-family: 'Avenir Next','Segoe UI',sans-serif;
					color: light-dark(#75767a,#a3a4a7);
				}
				
				.entryDate {
					font-size: 1.3rem;
				}
				
				.entryTitle {
					margin: 0;
					font-weight: 825;
					font-size: 2.4rem;
					line-height: 1.3;
					text-wrap: pretty;
				}
				
				.entrySummary:last-child {
					margin-block: .5rem 0;
					font-size: 1.5rem;
					line-height: 1.6;
					text-wrap: pretty;
				}
				
				.entries {
					inline-size: 100%;
					max-inline-size: 72rem;
					margin: 0 auto;
					padding: 0;
					list-style: none;
				}
					
				.entries li {
					margin-block: 0 2.8rem;
					border-block-end: 1px solid light-dark(#e0e2e6, #000);
					padding-block: 0 2.8rem;
				}
					
				.entries li:last-child {
					margin-block: 0;
					border: 0;
					padding-block: 0;
				}
				
				footer {
					display: flex;
					justify-content: center;
					inline-size: 100%;
					max-inline-size: 72rem;
					margin: 0 auto;
					padding: 0;
					list-style: none;
				}
				
				hr {
					display: block;
					margin: 3.6rem auto 4.2rem;
					width: 7.2rem;
					height: .6rem;
					background: radial-gradient(circle, light-dark(#222427, #75767a) 10%, transparent 10%) center / 3rem 1rem;
					border: 0;
					content: '';
				}
				
				.btn:link,
				.btn:visited {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 6px;
					font: 500 1.5rem/1.6 'Avenir Next','Segoe UI',sans-serif;
					white-space: nowrap;
					text-decoration: none;
					block-size: 5rem;
					background: light-dark(light-dark(#437689, #99bfcc), #e0e2e6) linear-gradient(0deg, #000f, #0000);
					background-blend-mode: soft-light;
					padding-inline: 1.8rem;
					color: light-dark(#fff, #000);
					transition: background-color .3s, box-shadow .3s, color .3s;
				}

				.btn:hover,
				.btn:active,
				.btn:focus {
					background-color: light-dark(light-dark(#c23f38, #d77a75), light-dark(#437689, #99bfcc));
				}

				.btn:active {
					box-shadow: inset 0 1px 2px .5px #0005;
					background-color: light-dark(#9e342e, light-dark(#437689, #99bfcc));
				}

				.vh:not(:focus):not(:active) {
					position: absolute;
					inline-size: 1px;
					block-size: 1px;
					overflow: hidden;
					white-space: nowrap;
					clip: rect(0 0 0 0);
					clip-path: inset(50%);
				}

				</style>
				
			</head>
			<body>
			
				<div class="alert">
					<div>
						You’re viewing the <em>Opus</em> web feed. Subscribe by copying <a>
							<xsl:attribute name="href">
								<xsl:value-of select="atom:link[@rel='self']/@href"/>
							</xsl:attribute>
							<xsl:value-of select="atom:link[@rel='self']/@href"/>
						</a> into a newsreader app. (<a href="/posts/rss-can-save-us-from-social-medias-algorithms">Learn more about web feeds and why they’re so cool</a>.)
					</div>
				</div>
				
				<div class="intro">

					<figure id="l">
						<a href="/">
							<svg viewBox="0 0 200 215" xmlns="http://www.w3.org/2000/svg" width="200" height="215">
								<path fill="currentColor" d="M121.8 12.8c.4.5.7 4-.8 5-23.5 14.3-25.6 19.7-25.6 19.7S118 21 144 15.3c-27-16.2-60.7-20-89.4-7C5.6 30.8-14 93.2 10.6 148c4 8.7 9 16.8 14.6 24C7.4 100 79.5 28.3 121.8 12.8m30.6 29c8.4 43-35.6 80.2-52 69.3C68 90 106 35 106 35 43.5 84.7 30 171 40.2 188c4.6 4 9.5 7.8 14.6 11 49 19 130-114.8 97.6-157m36 25.4c-6.8-14.7-16-27.3-26.8-37.5l-14.4-5.2c1.5 2 3.6 11.2 3.6 11.2 18 15.8 13.3 50 3.6 74.7 12.4-27.7 12-43.2 12-43.2l4.6-6c-1 67-68.3 144-105.2 143.6 25 11.8 53.2 13.3 78.6 1.8 49-22.3 68.7-84.7 44-139.4" />
							</svg>
							<span class="vh">Return to the Opus homepage</span>
						</a>
					</figure>

					<p>
					<strong>Welcome to <em>Opus</em>.</strong> I’m <a href="/about" class="p-name u-url h-card" rel="me">Jason Morehead</a> and this where I blog about <a href="/archives/topic/music">music</a>, <a href="/archives/topic/movies">movies</a>, <a href="/archives/topic/anime">anime</a>, <a href="/archives/topic/pop-culture">pop culture</a>, <a href="/archives/topic/religion">religion</a>, <a href="/archives/topic/web-development">web development</a>, and whatever else piques my curiosity. My most recent posts are listed below.
					</p>

				</div>
				
				<hr/>
				
				<ul class="entries">

					<xsl:for-each select="atom:entry">
						<xsl:sort select="atom:published" order="descending"/>
						
						<li>
						
							<article>
					
								<div class="entryDate">
								Published <xsl:value-of select="atom:published" />
								</div>
					
								<h2 class="entryTitle">
									<a>
										<xsl:attribute name="href">
											<xsl:value-of select="atom:link/@href"/>
										</xsl:attribute>
										<xsl:value-of select="atom:title"/>
									</a>
								</h2>
						
								<p class="entrySummary">
								<xsl:value-of select="atom:summary"/>
								</p>
								
							</article>
						
						</li>
						
					</xsl:for-each>
					
				</ul>
				
				<hr/>
				
				<footer>

					<a href="/archives" class="btn">Find older posts in the archives…</a>

				</footer>
				
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>