:root { --background-colour: hsl(44, 87%, 95%); --background-colour-2: hsl(44, 87%, 98%); --target-background-colour: hsl(44, 87%, 98%); --text-colour: hsl(192, 31%, 15%); --text-colour-knocked-1: hsl(192, 31%, 20%); --text-colour-knocked-2: hsl(192, 31%, 25%); --accent-colour: hsl(345, 86%, 22%); --rule-colour: hsla(345, 86%, 22%, 0.5); }

@media (prefers-color-scheme: dark) { :root { --background-colour: hsl(192, 100%, 6%); --background-colour-2: hsl(192, 100%, 10%); --target-background-colour: hsl(192, 100%, 12%); --text-colour: hsl(194, 14%, 80%); --text-colour-knocked-1: hsl(194, 14%, 70%); --text-colour-knocked-2: hsl(194, 14%, 62%); --accent-colour: hsl(1, 71%, 52%); --rule-colour: hsla(1, 71%, 52%, 0.5); } }

::view-transition-old(root) { animation: fade 0.2s linear forwards; }

::view-transition-new(root) { animation: fade 0.3s linear reverse; }

@keyframes fade { from { opacity: 1; }
  to { opacity: 0; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body { background-color: var(--background-colour); color: var(--text-colour); font: 18px/1.3 Lora, Palatino, "Libre Baskerville", Baskerville, serif; }

h1, h2, h3, h4, h5, h6, header, .subtitle { font-family: Alegreya, Palatino, "Libra Baskerville", Baskerville, serif; text-wrap: balance; }

a { color: var(--accent-colour); }

a:visited { color: var(--accent-colour); }

a:hover { color: var(--text-colour); }

table { border-collapse: collapse; margin: 1.25rem 0; width: 100%; }

table thead { border-bottom: 1px solid var(--rule-colour); }

table thead th { font-weight: normal; font-style: italic; }

table th, table td { padding: 0.5rem 0.25rem 0.5rem 0.25rem; }

table td { vertical-align: top; }

blockquote { font-style: italic; color: var(--text-colour-knocked-1); margin: 0 1rem 0.75rem 2rem; padding: 0 0 0 1rem; border-left: 1px solid var(--rule-colour); }

blockquote.poetry { white-space: pre-wrap; }

blockquote em, blockquote i, blockquote cite, blockquote pre, blockquote code { font-style: normal; }

h1, h2, h3 { font-weight: 800; }

h1 { font-size: 2rem; line-height: 2.2; margin: 0; }

h2 { font-size: 2rem; font-style: normal; line-height: 1.1; margin-top: 0.75rem; margin-bottom: 0.75rem; }

h2.post-title { font-size: 2.25rem; font-style: normal; }

h2 .rating { margin-left: 0.5rem; font-size: 1.5rem; }

.newsletter h2 { margin: 2rem 0 0 0; }

.newsletter h2.post-title { margin: 0.5rem 0 0.75rem 0; }

h3 { font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 0.7rem; }

.post-meta:has(+ h3.series) { margin-bottom: 0; }

h3.series { margin: 1em 0 2rem 0; color: var(--text-colour-knocked-2); font-family: Lora, Palatino, "Libre Baskerville", Baskerville, serif; font-size: 0.825em; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }

h3.series a { font-weight: 500; }

h3.series + h2 { margin-top: 0; }

.subtitle { font-size: 1.5rem; margin-top: 0; color: var(--text-colour-knocked-2); font-weight: normal; font-style: italic; }

h4 { font-size: 1.2rem; font-weight: 500; margin-top: 1.2rem; margin-bottom: 0.7rem; }

h1 code, h2 code, h3 code, h4 code { font-style: normal; padding: 0 0.1em; }

p, li, blockquote, dd { line-height: 1.5; hanging-punctuation: first allow-end last; text-wrap: pretty; }

p, li { padding-bottom: 0.75rem; }

.post li > p { padding-bottom: 0; }

dl { padding-bottom: 0.75rem; }

dl dt { padding-top: 0.75rem; font-style: italic; }

dl dt:first-child { padding-top: 0; }

dl dd { padding-top: 0.375rem; padding-left: 1.5rem; }

blockquote > p:last-child { padding-bottom: 0; }

.tabular-nums { font-variant-numeric: tabular-nums; }

sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }

sub { top: 0.4em; }

a.footnote { padding: 0 0.5em 0 0.25em; }

.featured-image { margin: 1.5rem 0 1.5rem 0; }

.featured-image img, figure img { width: auto; max-width: 100%; }

figure img.half { width: 100%; max-width: 25rem; }

figure { margin: 1.25rem 0; text-align: center; }

figure.highlight { text-align: left; }

figcaption { text-align: center; font-size: 0.9em; font-style: italic; color: var(--text-colour-knocked-2); margin-bottom: 1rem; }

figcaption a:link, figcaption a:visited { color: var(--text-colour-knocked-2); }

figcaption i, figcaption em, figcaption cite { font-style: normal; }

abbr[title] { position: relative; text-decoration: underline dotted; }

abbr[title]:focus::after { content: attr(title); position: absolute; left: 0; bottom: -30px; width: auto; white-space: nowrap; background-color: #1e1e1e; color: #fff; border-radius: 3px; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4); font-size: 14px; padding: 3px 5px; }

.block-anchor { position: absolute; right: -1.5rem; z-index: 10; margin-left: 0.5rem; opacity: 0; transition: opacity 0.3s ease-in; font-size: 0.9rem; }

:has(> .block-anchor) { position: relative; }

.post :target, .post .target { background-color: var(--target-background-colour); outline: none; }

input { background: transparent; border: 1px solid var(--accent-colour); font: 18px/1.3 Lora, Palatino, "Libre Baskerville", Baskerville, serif; padding: 0.25rem; }

input[type="text"], input[type="email"], input[type="search"] { color: var(--text-colour); margin: 0.5rem 0; }

input[type="submit"], button { color: var(--accent-colour); cursor: pointer; }

.normal-measure { max-width: 40rem; }

/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/
.home .hero { width: 100%; max-width: 48rem; margin: 0 auto 4rem auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem 2rem; }

.home .hero h2 { text-align: center; font-size: 3rem; flex-basis: 100%; }

.home .hero .site-description, .home .hero .newsletter-signup { flex-basis: 15rem; flex-grow: 1; flex-shrink: 1; font-size: 1.1em; }

.home .hero .site-description p:first-child { padding-bottom: 1.85rem; }

.home .hero .newsletter-signup .mc-field-group { max-width: 22rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }

.home .hero .newsletter-signup .mc-field-group input[type="email"] { flex-basis: 10rem; flex-grow: 1; flex-shrink: 1; }

.home .hero .newsletter-signup .mc-field-group input[type="submit"] { flex-basis: 5rem; flex-grow: 1; flex-shrink: 0; }

@media (max-width: 30em) { .home .hero h2 { font-size: 9vw; } }

.featured { margin-bottom: 4rem; }

.featured > p { max-width: 25em; }

.featured ul.featured-posts { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2rem; }

.featured ul.featured-posts li { padding-bottom: 0; }

@media (min-width: 40em) { .featured ul.featured-posts { grid-template-columns: 1fr 1fr; } }

@media (min-width: 70em) { .featured ul.featured-posts { grid-template-columns: 1fr 1fr 1fr; } }

.post-preview .featured-image { margin-top: 0; }

.post-preview .excerpt { position: relative; margin: -6rem 1.5rem 0 0.5rem; background-color: var(--background-colour-2); padding: 0.5rem 1.5rem 1rem 1.5rem; }

.post-preview h3 { margin-top: 0; }

.post-preview a { font-weight: 500; }

.post-preview p { padding-bottom: 0; }

.post-preview img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.recent { grid-area: main; }

ul.posts { list-style-type: none; }

ul.posts > li { margin: 0 0 3rem 0; }

ul.posts > li h3 { font-weight: 500; font-size: 1.5rem; margin: 1rem 0 1rem 0; text-align: left; position: relative; }

ul.posts > li h3:before { position: absolute; left: 0; }

ul.posts > li h3.link-title { padding-left: 1.25em; }

ul.posts > li h3.link-title:before { content: "\2192"; }

ul.posts > li li { margin-left: 2rem; }

ul.posts > li .post-meta { color: var(--text-colour-knocked-2); font-size: 0.825em; text-transform: uppercase; letter-spacing: 0.125rem; }

ul.posts > li .post-meta .hostname { font-size: 0.825em; }

@media (min-width: 40em) { .home ul.posts > li:not(.post-preview) { display: grid; grid-template-columns: minmax(0, 13rem) minmax(auto, 40rem); gap: 2rem; } .home ul.posts > li:not(.post-preview) .post-meta { padding-top: 0.65em; } .home ul.posts > li:not(.post-preview) h3, .home ul.posts > li:not(.post-preview) h3.post-title { margin-top: 0; padding-left: 0; } .home ul.posts > li:not(.post-preview) h3:before, .home ul.posts > li:not(.post-preview) h3.post-title:before { left: -1em; } .home ul.posts > li:not(.post-preview) h3.link-title:before, .home ul.posts > li:not(.post-preview) h3.post-title.link-title:before { left: -1.25em; } }

@media (min-width: 65em) { .search-category ul.search-posts { margin-bottom: 4rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr 1fr; list-style-type: none; } }

.pagination { grid-area: pagination; display: flex; flex-flow: row; justify-content: space-around; }

.pagination .current { text-align: center; flex-grow: 1; }

.pagination .previous, .pagination .next { flex: 0 0 10em; }

.pagination .next { text-align: right; }

@media (max-width: 30rem) { .pagination { font-size: 0.75em; } }

[v-cloak] { display: none; }

.post { max-width: 60rem; }

.post.full-width { max-width: 100%; }

.post.full-width .post-content { max-width: 100%; }

.post ol.newsletters { list-style-type: none; margin-left: 0; }

.post ol.newsletters li { margin-left: 0; }

.post ol.newsletters li .sequence { color: var(--text-colour-knocked-2); font-size: 0.825em; text-transform: uppercase; letter-spacing: 0.125rem; }

.post .link-meta { color: var(--text-colour-knocked-2); font-size: 0.825rem; }

.post.link h2 { text-indent: -1.1em; }

.post .subtitle { margin-bottom: 3rem; }

.post .post-meta { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 1rem 0 2rem 0; color: var(--text-colour-knocked-2); font-size: 0.825em; text-transform: uppercase; letter-spacing: 0.125rem; }

.post .post-meta p { margin: 0; }

.post .post-content { max-width: 40rem; }

@media (min-width: 40rem) { .post:not(.newsletter):has(.featured-image) { max-width: 100%; } .post:not(.newsletter):has(.featured-image) .featured-image img { width: 100vw; height: Min(calc(100vh - 2.5rem - 42px - 2rem - 2.5rem), 800px); object-fit: cover; } .post:not(.newsletter):has(.featured-image) .post-content { position: relative; margin: -16rem 0.5rem 0 1.5rem; background: var(--background-colour-2); padding: 0.5rem 1.5rem; } }

.no-dead-ends { margin-top: 2rem; max-width: 40rem; }

.related { margin-top: 1.5rem; }

ul.links { list-style: none; }

ul.links li { margin: 0 0 1.5rem 0; padding: 0; border: none; }

ul.links li .post-meta p { padding-bottom: 0; }

ul.links li .post-meta .hostname { font-size: 0.8em; }

ul.links li h3 { margin-top: 0; font-size: 1.25rem; font-weight: 500; }

/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/
.site { padding: 2.5rem; max-width: 95rem; margin: 0 auto; }

header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin-bottom: 2rem; }

header h1 { display: inline-block; line-height: 1; font-size: 2.5rem; margin-right: auto; }

header h1.title a { color: var(--accent-colour); }

header a { font-weight: bold; text-decoration: none; }

header nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

header a.extra { text-transform: lowercase; color: var(--text-colour-knocked-1); font-size: 1.25rem; padding-top: 1rem; }

footer { color: var(--text-colour-knocked-2); border-top: 1px solid var(--rule-colour); margin-top: 2rem; padding-top: 2rem; text-align: left; }

footer .copyright { text-align: left; }

footer form { display: flex; align-items: baseline; gap: 0.5rem; }

footer form input[type="search"] { flex-basis: 10rem; flex-grow: 0; flex-shrink: 1; }

footer form input[type="submit"] { flex-basis: 5rem; flex-grow: 0; flex-shrink: 1; }

footer nav ul { list-style: none; }

footer nav ul li { padding-bottom: 0; margin-bottom: 0.5rem; }

footer nav ul a:link, footer nav ul a:visited { color: var(--text-colour-knocked-2); }

@media (min-width: 45rem) { footer { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; } }

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/
/* standard */
pre, code { font-family: Inconsolata, monospace; }

.post pre { margin-bottom: 0.8rem; overflow: scroll; }

.post li, .post ol { margin-left: 2rem; }

.post blockquote > ul, .post blockquote > ol { margin-left: 0; }

.post p code, .post pre code { border: 1px solid var(--rule-colour); background-color: #eee; color: #111; padding: 0 0.2em; }

.post pre code { border: none; display: block; padding: 1rem; }

hr { border: none; border-top: 3px solid var(--rule-colour); margin: 2rem auto 2rem auto; width: 80%; }

.footnotes { margin-top: 2em; border-top: 1px solid var(--rule-colour); padding-top: 1em; font-size: 0.9em; }

.footnotes p { text-align: left; }

.post .left { float: left; margin: 0 1rem 1rem 0; }

.post .right { float: right; margin: 0 0 1rem 1rem; }

.image.small { width: 250px; height: auto; }

.image.small img { width: 100%; height: auto; }

.post iframe.buy-now { overflow: hidden; border: none; }

p.intro { font-style: italic; }

p.intro cite, p.intro em { font-style: normal; }

iframe.slideshare { margin-bottom: 1.5em; }

.review-subject { width: 10rem; margin-bottom: 0.75rem; color: var(--text-colour-knocked-1); }

.review-subject p { padding-bottom: 0; margin-bottom: 0.25rem; }

.review-subject p.title { font-weight: 500; }

.review-subject p.publisher { color: var(--text-colour-knocked-2); }

.review-subject img { width: 100%; height: auto; border: 1px solid var(--rule-colour); }

@media (min-width: 22rem) and (max-width: 60rem) { .review-subject { float: right; margin-left: 1rem; font-size: 0.8rem; } }

@media (min-width: 60rem) { .post.review { position: relative; } .review-subject { width: 15rem; position: absolute; right: -17rem; } }

.topic { margin-bottom: 2rem; }

.topic h3 { font-size: 1.25rem; }

.topic .description { font-style: italic; }

.topic .topic-posts .topic-post::after { content: ", "; }

.topic .topic-posts .topic-post:last-child::after { content: ""; }

/*****************************************************************************/
/*
/* Media queries
/*
/*****************************************************************************/
@media (max-width: 37rem) { body { font-size: 18px; } .site { padding: 1rem; } .site header { margin-bottom: 20px; } .site header h1 { margin-bottom: 0; } .posts li { text-align: left; } .image.small { width: 50%; } }

@media print { body { font-size: 11pt; } .post a::after { content: " (" attr(href) ") "; } nav, .featured-image, .newsletter-signup { display: none !important; } }

/* Table of contents */
.toc-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 2rem 1rem; }

.toc-sections section { padding: 1rem; background-color: var(--background-colour-2); }

.toc-sections section h3 { margin-top: 0; }

/* Comments */
.comment-form { max-width: 40rem; margin-left: 1.5rem; }

.comment-form form { display: flex; flex-wrap: wrap; gap: 1em; }

.comment-form form > * { flex-basis: 100%; flex-shrink: 0; }

.comment-form fieldset { border: none; display: flex; flex-wrap: wrap; gap: 1em; align-items: center; }

.comment-form fieldset label { flex-basis: max-content; }

.comment-form fieldset input { flex-basis: auto; flex-grow: 1; }

.comment-form fieldset textarea { flex-basis: 100%; flex-shrink: 0; height: 7em; height: 7lh; }

/*# sourceMappingURL=main.css.map */