/*
 * Shaun Hevey - site styles.
 *
 * The colour palette, font stacks and .prose typography rules are derived
 * from Tailwind CSS and its typography plugin (https://tailwindcss.com).
 *
 * MIT License
 *
 * Copyright (c) Tailwind Labs, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

:root {
   --bg: #fafaf9;
   --text: #000;
   --prose-body: #374151;
   --prose-heading: #111827;
   --prose-hr: #e5e7eb;
   --prose-quote: #111827;
   --prose-quote-border: #e5e7eb;
   --prose-th-border: #d1d5db;
   --prose-td-border: #e5e7eb;
   --muted: #6b7280;
   --footer-muted: #9ca3af;
   --accent: #3b82f6;
   --hover: #60a5fa;
   --glow: #93c5fd;
   --alert-bg: #bfdbfe;
   --alert-text: #1d4ed8;
   --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
   :root {
      --bg: #09090b;
      --text: #fff;
      --prose-body: #d1d5db;
      --prose-heading: #fff;
      --prose-hr: #374151;
      --prose-quote: #f3f4f6;
      --prose-quote-border: #374151;
      --prose-th-border: #4b5563;
      --prose-td-border: #374151;
      --glow: #1e3a8a;
      --alert-bg: #172554;
      --alert-text: #93c5fd;
   }
}


*,
*::before,
*::after {
   box-sizing: border-box;
}

main,
article,
section,
figure,
figcaption,
header,
footer,
nav {
   display: block;
}

html,
body {
   overflow-x: hidden;
}

body {
   margin: 0;
   min-height: 100vh;
   font-family: var(--font-sans);
   line-height: 1.5;
   background: var(--bg);
   color: var(--text);
}

img,
video {
   max-width: 100%;
   height: auto;
}

a {
   color: inherit;
}


.container {
   max-width: 72rem;
   margin: 1rem auto 6rem;
   padding: 0 1rem;
}

main {
   padding: 2rem 0;
   display: flex;
   justify-content: center;
}


.site-header {
   padding: 1rem 0;
}

.site-header nav {
   display: flex;
   justify-content: center;
   gap: 2rem;
}

.site-header a {
   text-decoration: none;
   text-underline-offset: 8px;
}

.site-header a:hover {
   text-decoration: underline;
}

.site-header a.active {
   color: var(--accent);
   text-decoration: underline;
}


.prose {
   color: var(--prose-body);
   font-size: 1rem;
   line-height: 1.75;
   max-width: 65ch;
   min-width: 0;
   overflow: auto;
   scrollbar-width: none;
}

.prose::-webkit-scrollbar {
   display: none;
}


@media (min-width: 640px) {
   .prose {
      width: 24rem;
      max-width: 24rem;
   }
}

@media (min-width: 768px) {
   .prose {
      width: 32rem;
      max-width: none;
   }
}

@media (min-width: 1024px) {
   .prose {
      width: 36rem;
   }
}

@media (min-width: 1280px) {
   .prose {
      width: 42rem;
   }
}

@media (min-width: 1536px) {
   .prose {
      width: 48rem;
   }
}


.prose > :first-child {
   margin-top: 0;
}

.prose p {
   margin: 1.25em 0;
}

.prose a {
   color: var(--prose-heading);
   text-decoration: underline;
   font-weight: 500;
}

.prose strong {
   color: var(--prose-heading);
   font-weight: 600;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
   color: var(--prose-heading);
}

.prose h1 {
   font-size: 3rem;
   font-weight: 700;
   line-height: 1;
   margin: 0 0 0.889em;
}

.prose h2 {
   font-size: 1.5em;
   font-weight: 700;
   line-height: 1.333;
   margin: 2em 0 1em;
}

.prose h3 {
   font-size: 1.25em;
   font-weight: 600;
   line-height: 1.6;
   margin: 1.6em 0 0.6em;
}

.prose h4 {
   font-weight: 600;
   line-height: 1.5;
   margin: 1.5em 0 0.5em;
}


.prose h2+*,
.prose h3+*,
.prose h4+*,
.prose hr+* {
   margin-top: 0;
}

.prose hr {
   border: 0;
   border-top: 1px solid var(--prose-hr);
   margin: 3em 0;
}


.prose ul,
.prose ol {
   margin: 1.25em 0;
   padding-left: 1.625em;
}

.prose ul {
   list-style: disc;
}

.prose li {
   margin: 0.5em 0;
}

.prose li::marker {
   color: var(--footer-muted);
}


.prose blockquote {
   font-weight: 500;
   font-style: italic;
   color: var(--prose-quote);
   border-left: 0.25rem solid var(--prose-quote-border);
   margin: 1.6em 0;
   padding-left: 1em;
}

.prose img {
   margin: 2em 0;
   border-radius: 0.75rem;
}


.prose table {
   width: 100%;
   table-layout: auto;
   font-size: 0.875em;
   line-height: 1.714;
   margin: 2em 0;
   border-collapse: collapse;
   display: block;
   overflow-x: auto;
}

.prose thead {
   border-bottom: 1px solid var(--prose-th-border);
}

.prose th {
   color: var(--prose-heading);
   font-weight: 600;
   text-align: left;
}

.prose th,
.prose td {
   padding: 0.571em;
}

.prose tbody tr {
   border-bottom: 1px solid var(--prose-td-border);
}


.prose code {
   color: var(--prose-heading);
   font-family: var(--font-mono);
   font-weight: 600;
   font-size: 0.875em;
}


.prose :not(pre)>code::before,
.prose :not(pre)>code::after {
   content: "`";
}

.prose pre {
   position: relative;
   font-family: var(--font-mono);
   font-size: 0.875em;
   line-height: 1.714;
   margin: 1.714em 0;
   border-radius: 0.375rem;
   padding: 0.857em 1.143em;
   overflow-x: auto;
}

.prose pre code {
   color: inherit;
   font-weight: inherit;
   font-size: inherit;
}

.prose .codehilite {
   position: relative;
   border-radius: 0.375rem;
   margin: 1.714em 0;
   overflow: hidden;
}


.prose .codehilite pre {
   margin: 0;
}

.copy-code-button {
   position: absolute;
   top: 0.5em;
   right: 0.5em;
   z-index: 1;
   font: inherit;
   font-size: 0.75em;
   line-height: 1;
   cursor: pointer;
   padding: 0.35em 0.6em;
   border: 1px solid currentColor;
   border-radius: 0.3em;
   background: transparent;
   color: inherit;
   opacity: 0.6;
}

.copy-code-button:hover,
.copy-code-button:focus-visible {
   opacity: 1;
}

.copy-code-button.copied {
   opacity: 1;
   border-color: var(--hover);
   color: var(--hover);
}


.prose .post-list {
   list-style: none;
   padding-left: 0;
}

.post-list li {
   list-style: none;
}

.post-list a {
   text-underline-offset: 2px;
}

.post-list a:hover,
.topics a:hover,
.site-footer a:hover {
   color: var(--hover);
}

.post-date {
   display: none;
   width: 6rem;
   color: var(--muted);
   font-weight: 300;
}


@media (min-width: 768px) {
   .post-date {
      display: inline-block;
   }
}


.prose .topics a {
   color: var(--text);
   text-underline-offset: 2px;
}

.topic {
   margin-right: 0.25rem;
}

.topics-intro {
   padding-bottom: 2rem;
}

.muted {
   color: var(--muted);
   font-weight: 300;
}

.prose .muted a {
   color: var(--muted);
   font-weight: 300;
   text-decoration: none;
}

.prose .topic-heading {
   font-weight: 400;
}


.home {
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin: 0 auto;
}

.home-section {
   padding-top: 4rem;
}

.home-icon {
   flex: 0 0 150px;
   width: 150px;
   height: 150px;
   align-content: center;
   background: radial-gradient(var(--glow), transparent 75%);
}

.home-icon img {
   display: block;
}

.home>div:first-child {
   min-width: 0;
}

@media (max-width: 639px) {
   .home-icon {
      flex-basis: 80px;
      width: 80px;
      height: 80px;
   }
}


.archived-alert {
   border-radius: 0.75rem;
   border: 2px solid var(--accent);
   background: var(--alert-bg);
   color: var(--alert-text);
   padding: 0 1rem;
}

.prose .archived-alert p {
   margin: 1em 0;
   font-size: 0.875rem;
}

.prose .archived-alert .archived-alert-title {
   font-weight: 700;
   font-size: 1.25rem;
}


.site-footer a {
   text-decoration: none;
   text-underline-offset: 2px;
}

.site-footer a:hover {
   text-decoration: underline;
}

.footer-social {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: 2rem;
   padding: 0 1.25rem;
   font-size: 0.875rem;
}

.footer-disclaimer {
   padding: 0 1.25rem;
   margin-top: 0.5rem;
   font-size: 0.75rem;
   color: var(--footer-muted);
}

.footer-bottom {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   padding: 0.5rem 1.25rem 1rem;
}

.footer-copyright {
   margin-top: 0.5rem;
   font-size: 0.875rem;
}

.footer-links {
   margin-top: 0.5rem;
   font-size: 0.875rem;
}

.footer-links a {
   padding-right: 0.5rem;
}

@media (min-width: 640px) {
   .footer-bottom {
      flex-direction: row;
   }

   .footer-links {
      margin-left: auto;
      margin-top: 0;
   }
}