/*
 * kblog
 * The page design (layout, titles, post list, navigation, footer) comes from
 * Kumail's earlier Shane Neubauer theme. Post body copy follows
 * justinjackson.ca: Roboto Mono, bold highlighted links, handwritten quotes.
 */

:root {
    --color-text: #222222;
    --color-title: #111111;
    --color-secondary: #333333;
    --color-muted: #999999;
    --color-faint: #aaaaaa;
    --color-border: #eeeeee;
    --color-background: #ffffff;
    --color-link: #0000ff;
    --color-highlight: #fff5c4;
    --color-highlight-hover: #ffff00;
    --color-paper: #d8e9fb;
    --color-ink: #24407a;
    --font-display: "Inter Tight", Arial, Helvetica, sans-serif;
    /* Apple's built-in serifs first (New York in Safari, Iowan elsewhere on Macs) */
    --font-serif: ui-serif, "Iowan Old Style", Charter, "Hoefler Text", Georgia, Cambria, "Times New Roman", serif;
    --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-hand: "Shadows Into Light", cursive;
    /* Fonts picked under Design & branding replace the defaults */
    --font-heading: var(--gh-font-heading, var(--font-display));
    --font-body: var(--gh-font-body, var(--font-mono));
    /* Type scales smoothly between phone and large-screen sizes */
    --text-small: clamp(13px, 0.78rem + 0.12vw, 14.5px);
    --text-body: clamp(16px, 0.9rem + 0.3vw, 18.5px);
    /* The same margin on every side, scaling with the screen */
    --gutter: clamp(16px, 6vw, 120px);
    --site-max: 1100px;
    --site-left: max(var(--gutter), calc((100vw - var(--site-max)) / 2));
    /* Post text stays at a comfortable line length */
    --column: 74ch;
    --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
    --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #dcdcdc;
        --color-title: #f2f2f2;
        --color-secondary: #c8c8c8;
        --color-muted: #8a8a8a;
        --color-faint: #777777;
        --color-border: #2c2c2c;
        --color-background: #151515;
        --color-link: #8fa8ff;
        --color-highlight: rgba(255, 245, 196, 0.18);
        --color-highlight-hover: rgba(255, 255, 0, 0.32);
        --color-paper: #23344f;
        --color-ink: #cfe0ff;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
}

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

/* Layout */

/* The footer sits at the bottom of the window on short pages */
.site {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: min(var(--site-max), 100% - 2 * var(--gutter));
    margin: var(--gutter) auto;
}

.site-main {
    flex: 1;
}

/* Back link above post titles, with Lucide's arrow-left */

.back-link {
    color: var(--color-faint);
    font: var(--text-small)/1.5 var(--font-display);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* The back link and post date share one line above the title */
.article-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 0.6em;
    margin-bottom: clamp(8px, 1.2vw, 16px);
    color: var(--color-faint);
    font: var(--text-small)/1.5 var(--font-display);
}

.article-date::before {
    content: "\00B7";
    margin-right: 0.6em;
}

.back-link::before {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.4em;
    /* Centred on the capitals and numbers, so it lines up with the date too */
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-left) center / contain no-repeat;
    mask: var(--icon-arrow-left) center / contain no-repeat;
    transition: transform 0.15s ease;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--color-secondary);
}

.back-link:hover::before {
    transform: translateX(-0.2em);
}

@media (prefers-reduced-motion: reduce) {
    .back-link,
    .back-link::before {
        transition: none;
    }
}

/* Page titles: tight, bold sans-serif */

.page-title {
    margin: 0 0 clamp(32px, 5vw, 64px);
    color: var(--color-title);
    font: bold clamp(30px, 1.4rem + 1.6vw, 52px)/1.05 var(--font-heading);
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.page-title:has(+ .archive-description) {
    margin-bottom: 0.4em;
}

.archive-description {
    margin: 0 0 clamp(32px, 5vw, 64px);
    color: var(--color-muted);
    font: var(--text-small)/1.5 var(--font-display);
}

/* Post list: a numbered list, the newest post larger */

.post-list {
    margin: 0;
    padding-left: 1.5em;
    list-style-type: decimal;
}

.post-item {
    margin-bottom: 1em;
    padding-left: 10px;
    color: var(--color-faint);
    font: clamp(15px, 0.85rem + 0.3vw, 19px) var(--font-display);
}

.post-item a {
    color: var(--color-title);
    font: clamp(17px, 0.95rem + 0.35vw, 21px)/1.3 var(--font-heading);
    text-decoration: none;
}

.post-item-date {
    display: block;
    margin-top: 2px;
    color: var(--color-faint);
    font: var(--text-small)/1.5 var(--font-display);
}

.post-item:first-child a {
    font-size: clamp(22px, 1.1rem + 0.9vw, 30px);
    font-weight: bold;
    letter-spacing: 0.01em;
}

/* Lucide's arrow-right, revealed on hover */
.post-item a::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.25em;
    /* Centres the arrow on the lowercase letters rather than sitting it on the baseline */
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
    opacity: 0;
    transform: translateX(-0.25em);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.post-item a:hover::after,
.post-item a:focus-visible::after {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .post-item a::after {
        transition: none;
    }
}

/* Feature image and post details */

.feature-image {
    margin: 0 0 2em;
}

.feature-image img {
    display: block;
    width: 100%;
}

.feature-image figcaption {
    margin-top: 8px;
    color: var(--color-muted);
    font: var(--text-small)/1.5 var(--font-display);
}

/* Previous and next links */

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(40px, 5vw, 64px);
}

/* Long titles wrap into an even block instead of running across the page */
.post-nav a {
    max-width: min(48%, 20em);
    text-wrap: balance;
}

@media (max-width: 520px) {
    .post-nav {
        flex-direction: column;
    }

    .post-nav a {
        max-width: none;
    }
}

.post-nav a {
    display: block;
    color: var(--color-secondary);
    font: clamp(15px, 0.85rem + 0.3vw, 18px)/1.45 var(--font-display);
    text-decoration: none;
}

.post-nav a:hover {
    color: var(--color-title);
}

.post-nav span {
    color: var(--color-muted);
    font-family: var(--font-serif);
    font-style: italic;
}

.post-nav-next {
    margin-left: auto;
    text-align: right;
}

/* Footer */

.site-footer {
    margin-top: clamp(40px, 6vw, 88px);
    text-align: right;
}



.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 20px;
    margin: 4px 0 0;
    font: var(--text-small)/1.5 var(--font-display);
}

.site-footer-links a {
    color: var(--color-secondary);
    text-decoration: none;
}

.site-footer-links a:hover {
    color: var(--color-title);
}

.site-footer-icons {
    margin: 10px 0 0;
}

.social-icons {
    display: inline-flex;
    gap: 14px;
}

.social-icons a {
    display: inline-flex;
    color: var(--color-faint);
    transition: color 0.15s ease;
}

.social-icons a:hover,
.social-icons a:focus-visible {
    color: var(--color-secondary);
}

.social-icons svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.site-footer-title {
    margin: 0;
    color: var(--color-title);
    font: normal clamp(18px, 1rem + 0.4vw, 23px)/1.5 var(--font-serif);
    letter-spacing: -1px;
}

.site-footer-title a {
    color: inherit;
    text-decoration: none;
}

.site-footer-title span {
    color: var(--color-secondary);
    opacity: 0.8;
}

.site-footer-title em {
    font-style: italic;
}

/* Post body copy, after justinjackson.ca */

.gh-content {
    max-width: var(--column);
}

.gh-content > * {
    margin: 0 0 1.5em;
}

.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    margin: 0 0 1em;
    padding-top: 1em;
    color: var(--color-title);
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.25;
}

.gh-content h2 {
    font-size: clamp(26px, 1.3rem + 1vw, 34px);
}

.gh-content h3 {
    font-size: clamp(21px, 1.1rem + 0.5vw, 26px);
}

.gh-content h4 {
    font-size: clamp(18px, 1rem + 0.3vw, 21px);
}

.gh-content h5,
.gh-content h6 {
    font-size: 1em;
}

/* Bold blue links with a highlighter underline */
.gh-content a {
    color: var(--color-link);
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(180deg, transparent 70%, var(--color-highlight) 0);
}

.gh-content a:hover {
    background-image: linear-gradient(180deg, transparent 10%, var(--color-highlight-hover) 0);
}

.gh-content ul,
.gh-content ol {
    padding-left: 1.5em;
}

.gh-content ul {
    list-style-type: square;
}

.gh-content li {
    margin-bottom: 0.4em;
}

.gh-content li > p {
    margin: 0;
}

/*
 * Handwritten pull quotes on a tilted scrap of pastel paper, its edges cut
 * with pinking shears. The quote's mask zigzags the top and bottom edges and
 * the paper layer's mask zigzags the sides, so all four edges are cut.
 *
 * Quotes are blue paper; alternative quotes (press the quote button twice)
 * are yellow.
 */
.gh-content blockquote:not([class]),
.gh-content blockquote.kg-blockquote-alt {
    --tooth: 12px;
    position: relative;
    isolation: isolate;
    margin: 40px 0 64px -24px;
    padding: 32px 40px;
    color: var(--quote-ink, var(--color-ink));
    font-family: var(--font-hand);
    font-size: clamp(24px, 1.2rem + 1.1vw, 34px);
    font-style: normal;
    line-height: 1.25;
    text-align: left;
    transform: rotate(var(--quote-tilt, -1.5deg));
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
}

.gh-content blockquote:not([class])::before,
.gh-content blockquote.kg-blockquote-alt::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--quote-paper, var(--color-paper));
    -webkit-mask:
        conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% var(--tooth) repeat-y,
        conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% var(--tooth) repeat-y;
    mask:
        conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% var(--tooth) repeat-y,
        conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% var(--tooth) repeat-y;
}

.gh-content blockquote:not([class]) p:last-child,
.gh-content blockquote.kg-blockquote-alt p:last-child {
    margin: 0;
}

.gh-content blockquote:not([class]) em,
.gh-content blockquote.kg-blockquote-alt em {
    padding-inline: 8px;
    background-color: var(--quote-highlight, var(--color-highlight-hover));
    color: #3c3c3c;
    font-style: normal;
}

@media (max-width: 700px) {
    .gh-content blockquote:not([class]),
    .gh-content blockquote.kg-blockquote-alt {
        margin-left: 0;
    }
}

.gh-content blockquote.kg-blockquote-alt {
    --quote-paper: #fdf1b8;
    --quote-ink: #5a4510;
    --quote-tilt: 1.5deg;
    --quote-highlight: #ffffff;
}

@media (prefers-color-scheme: dark) {
    .gh-content blockquote.kg-blockquote-alt {
        --quote-paper: #4a4220;
        --quote-ink: #fdf1b8;
        --quote-highlight: rgba(255, 255, 255, 0.2);
    }
}

.gh-content hr {
    margin-block: 2.4em;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.gh-content code:not(pre code) {
    padding: 0.1em 0.35em;
    background: var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.gh-content pre {
    overflow-x: auto;
    padding: 16px 20px;
    background: #1d1d1f;
    color: #f5f5f7;
    font-family: var(--font-mono);
    font-size: 0.85em;
    line-height: 1.6;
}

.gh-content table {
    display: block;
    overflow-x: auto;
}

.gh-content figcaption {
    margin-top: 8px;
    color: var(--color-muted);
    font: var(--text-small)/1.5 var(--font-display);
}

/* Editor cards set wide stretch to the right, full go edge to edge */
.gh-content .kg-width-wide {
    width: min(100% + 240px, 100vw - 2 * var(--site-left));
}

.gh-content .kg-width-full {
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * var(--site-left));
}

.gh-content .kg-width-wide img,
.gh-content .kg-width-full img {
    width: 100%;
}