/* Main Configuration */

@layer configuration {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        background: none;
        text-decoration: none;
        outline: none;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        color: inherit;

        /* Disable double tap to zoom */
        touch-action: manipulation;

        /* Fix the antialias when needed */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "kern", "liga", "clig", "calt";

        /* Global Transitions */
        transition-delay: 0ms;
        transition-duration: 150ms;
        transition-property: none;
        transition-timing-function: ease-out;
    }

    summary {
        list-style: none;
    }

    details summary::-webkit-details-marker {
        display: none;
    }
}

@layer configuration {

    @font-face {
        font-family: "Iowan";
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
        font-weight: bold;
        src: url('/css/fonts/IowanOldStyleBT-Bold.woff2') format('woff2');
    }

    @font-face {
        font-family: "Iowan";
        font-style: italic;
        font-stretch: normal;
        font-display: swap;
        font-weight: normal;
        src: url('/css/fonts/IowanOldStyleBT-Italic.woff2') format('woff2');
    }

    @font-face {
        font-family: "Iowan";
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
        font-weight: normal;
       src: url('/css/fonts/IowanOldStyleBT-Roman.woff2') format('woff2');
    }

    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
        font-weight: normal;
        src: url('/css/fonts/InterDisplay-Regular.woff2') format('woff2');
    }

    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-stretch: normal;
        font-display: swap;
        font-weight: bold;
        src: url('/css/fonts/InterDisplay-Bold.woff2') format('woff2');
    }

    @font-face {
        font-family: "Inter";
        font-style: italic;
        font-stretch: normal;
        font-display: swap;
        font-weight: bold;
        src: url('/css/fonts/InterDisplay-BoldItalic.woff2') format('woff2');
    }

    :root {

        /* Background Colors */
        --background: #fff;
        --background-media: #f9f9f9;
        --background-code: #f9f9f9;

        /* Archive Labels */
        --background-archive-interview: #f9f9f9;

        /* Text Colors */
        --text: #474747;
        --text-lighter: #aaa;

        --lines: #eee;
        --marks: #bbb;
        --lists: #888;

        /* The 2 shades of pink */
        --brand: #fff1ff;
        --brand-alt: #ff7dff;

        /* Font Size and Line Height 450px -> 3500px */
        --font-size: clamp(14px, 0.45vi + 12.42px, 26px);
        --line-height: clamp(26px, 0.72vi + 22.75px, 48px);

        /* Font Families */
        --font-family: "Iowan", "Iowan Old Style", "Iowan BT", 'Palatino Linotype', 'URW Palladio L', P052, serif;
        --font-family-sans: system-ui, sans-serif;
        --font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        --font-family-header: "Inter", "Inter Display", 'Inter UI', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --font-style: normal;
        --font-weight: 400;

        /* Font Sizes and Styles */
        --base-text: 400 1rem/1.85 var(--font-family);

        /* The three level of titles */
        --h1-title: 700 1.6rem/1.5 var(--font-family);
        --h2-title: 700 1.3rem/1.6 var(--font-family);
        --h3-title: 700 1.15rem/1.7 var(--font-family);

        /* Various Type Styles */
        --caption: 400 0.86rem/1.85 var(--font-family);
        --code: 400 0.86rem/1.85 var(--font-family-mono);

        --interlude-title: 700 1rem/1.85 var(--font-family);
        --interlude-text: 400 0.86rem/1.85 var(--font-family);

        --interview-edition: 700 0.86rem/1.85 var(--font-family);
        --interview-cta: 700 0.86rem/3 var(--font-family);

        --archive-dates: 700 1rem/1.85 var(--font-family);
        --archive-labels: 400 0.75rem/1.65 var(--font-family);

        --table-head: 400 0.86rem/2.25 var(--font-family-sans);
        --table-body: 400 0.86rem/2.25 var(--font-family);

        --smaller-text: 400 0.790rem/0.790rlh var(--font-family);
        --small-text: 400 0.889rem/0.889rlh var(--font-family);

        /* Layout Variables */
        --text-column: 20rlh;
        --text-column-wider: 22rlh;
        --media-column: 28rlh;

        /* Design Variables */
        --shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;

        /* Set the defaults */
        font-size: var(--font-size);
        line-height: var(--line-height);
        font-family: var(--font-family);
        font-weight: var(--font-weight);
        background: var(--background);
        color: var(--text);

    }

    ::selection {
        background: var(--brand);
    }
}

/* Global Settings */

:root[data-theme="dark"] {
    --background: #111;
    --background-media: #1a1a1a;
    --background-code: #151515;
    --background-archive-interview: #1a1a1a;
    --text: #e0d0e0;
    --text-lighter: #888;
    --lines: #333;
    --marks: #555;
    --lists: #666;
    --brand: #200020;
    --brand-alt: #ff7dff;
    --shadow: rgba(0, 0, 0, 0.4) 0px 10px 10px -10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background: #111;
        --background-media: #1a1a1a;
        --background-code: #151515;
        --background-archive-interview: #1a1a1a;
        --text: #e0d0e0;
        --text-lighter: #888;
        --lines: #333;
        --marks: #555;
        --lists: #666;
        --brand: #200020;
        --brand-alt: #ff7dff;
        --shadow: rgba(0, 0, 0, 0.4) 0px 10px 10px -10px;
    }
}


@view-transition {
	navigation: auto;
}

html {
	overflow-y: scroll;
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: 0rlh 1rlh 1rlh;
}

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   ol,
   ul,
   blockquote,
   pre,
   details {
       margin-left: auto;
       margin-right: auto;
       max-width: var(--text-column);
   }

   blockquote,
   pre {
       padding: 1rlh;
   }

   blockquote {
       max-width: var(--text-column-wider);
   }

   blockquote p {
       font-style: inherit;
   }


   :where(p, ul, ol, pre):last-child {
       margin-bottom: unset;
   }

   /* Titles */
   h1 {
       font: var(--h1-title);
       margin-bottom: 1.5em;
   }

   h2 {
       font: var(--h2-title);
       margin-bottom: 1em;
       margin-top: 3em;
       text-align: center;
   }

   h3,
   h4,
   h5,
   h6 {
       font: var(--h3-title);
       margin-bottom: 1em;
       margin-top: 2em;
       text-align: center;
   }

   p {
       font: var(--base-text);
   }

   /* Set the correct text indent */
   p+p {
       text-indent: 2ch;
   }

   /* General  */
   strong {
       font-weight: 700;
   }

   em {
       font-style: italic;
   }

   /* Code Blocks */
   code,
   pre {
       background: var(--background-code);
       font: var(--code);
   }

   pre {
       margin-top: 1rlh;
       margin-bottom: 1rlh;
       border: 2px dashed #ccc;
       overflow: auto;
   }

   /* Horizontal Divider */
   hr {
       border: none;
       margin: 2rlh 0;
       text-align: center;

       /* Add the flowers */
       &::before {
           content: "✽ ✽ ✽";
           white-space: pre;
           color: var(--marks);
       }
   }

   /* Quotes */
   blockquote {
       border: 1px solid var(--lines);
       margin-top: 1.5rlh;
       margin-bottom: 1.5rlh;
       position: relative;
       font-style: italic;
       border-radius: 2px;
       box-shadow: var(--shadow);


       &::before {
           content: "❊ ❈ ❊";
           color: var(--marks);
           position: absolute;
           top: 0;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--background);
           padding: 0 0.25rem;
           font-style: normal;
       }

       &:nth-child(odd)::before {
           content: "❈ ❊ ❈";
       }

   }

   /* Lists */
   ul,
   ol {
       padding-left: 0ch;
   }

   li::marker {
       color: var(--lists);
   }

   ul {
       list-style-type: circle;
   }

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img{
  max-width: 100%;
}
img[width][height] {
  height: auto;
}
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}
video,
iframe {
	width: 100%;
	height: auto;
}
iframe {
	aspect-ratio: 16/9;
}

p:last-child {
	margin-bottom: 0;
}

main {
    font: var(--base-text);
    /* Layout Variables */
    max-width: var(--text-column);
    margin-left: auto;
    padding: 4rlh 0 4rlh;
    margin-right: auto;
}


/* Links */
:where(p, li, small) a {
background-image: linear-gradient(to right, var(--brand), var(--brand-alt));
    background-repeat: no-repeat;
    transition-property: background-size;
    background-position: 0% 100%;
    background-size: 300% 40%;
    text-decoration-skip-ink: none;
    text-decoration-thickness: .5em;
    text-underline-offset: -.25em;
    text-decoration-color: var(--brand);
    transition-property: background-position;

    &:hover {
        background-position: 100% 100%;
    }
}
.navitem a {
    background: none;
    text-decoration: none;
}

#skip-link {
	text-decoration: none;
	background: var(--background-color);
	color: var(--text-color);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gray-90);
	border-radius: 2px;
}

/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
	position: absolute;
	top: 1rem;
	left: 1rem;
	/* Ensure it is positioned on top of everything else when it is shown */
	z-index: 999;
}

.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}
code {
	word-break: break-all;
}

/* Header */
header {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 1rlh 1rlh 1rlh;
    font: var(--font-family-header);
}
.home-link {
	flex-grow: 1;
	font-size: 1em; /* 16px /16 */
	font-weight: 700;
    font-family: var(--font-family-header);
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

.title-accent {
  background: linear-gradient(to right, var(--brand), var(--brand-alt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

heading-anchors p {
    initial-letter: 2;
}
/* Nav */
.nav {
	display: flex;
	gap: .5em 1em;
	padding: 0;
	margin: 0;
	list-style: none;
    font-family: var(--font-family-header);
}
.nav-item {
	display: inline-block;
}
.nav-item a[href] {
	text-decoration: none;
    background: none;
}
/* todo
.nav a[href][aria-current="page"] {
	text-decoration: underline;
}
*/
/* Posts list */
.postlist {
	counter-reset: start-from var(--postlist-index);
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: 0.8125em; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	/* flex-basis: calc(100% - 1.5rem);*/
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}


.footnotes {
    margin-top: 2rlh;
}

.footnotes-list, .footnote-item::marker, .footnote-item p, .footnote-ref {
    font: var(--smaller-text);
}

.sparkline {
    max-width: 2rlh;
}

/* Page specific adjustments */
aside {
    display: block;
    float: right;
    margin: 0.5lh;
    max-width: calc(var(--text-column) / 3);
}

.myphoto {
    display: block;
    margin: 0.5lh auto;
    max-width: 100%;
    border-radius: 0.5rlh;
    corner-shape: squircle;
}

/* Base container rules */
.micropostlist {
    list-style: none;
    padding: 0;
}

/* Microblog item rules */
.archive-item.micro-post {
    margin-bottom: 2.5rem;
}

.post-footer {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

/* Traditional blog post styles */
.archive-item.traditional-post {
    margin-bottom: 2.5rem;
}

.post-title-link {
    text-decoration: none;
    color: inherit;
}

.post-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

/* Unified Permalink Styling — matches heading-anchors .ha style */
.post-permalink-link {
    text-decoration: none;
    background: none;
    opacity: 0.3;
    padding: 0 0.25em;
    transition: opacity 0.2s;
}

.post-permalink-link:is(:hover, :focus) {
    background: none;
    opacity: 1;
}

/* Site footer */
.site-footer {
  text-align: center;
  padding: 1rlh;
  color: var(--text-lighter);
  font-family: var(--font-family-header);
  font-size: 0.8rem;
}

/* Archive calendar navigation */
.archive-cal-nav {
  margin-top: 2rlh;
  padding-top: 1rlh;
  border-top: 1px solid var(--lines);
  font-family: var(--font-family-header);
}

.archive-nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rlh;
  font-family: var(--font-family-header);
}

.archive-nav-newer { text-align: left; }
.archive-nav-older { text-align: right; }

.archive-nav-newer a,
.archive-nav-older a {
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: underline;
}

.archive-nav-disabled {
  font-size: 0.85rem;
  color: var(--text-lighter);
  white-space: nowrap;
}


.cal-recent-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.cal-month {
  min-width: 0;
}

.cal-month-name {
  display: block;
  font: var(--archive-labels);
  font-family: var(--font-family-header);
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.15rem;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.cal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 0.62rem;
  font-family: var(--font-family-mono);
  line-height: 1.7;
  text-align: right;
}

.cal-cells abbr {
  color: var(--text-lighter);
  text-decoration: none;
  font-style: normal;
  text-align: right;
}

.cal-cells span {
  color: var(--text-lighter);
  text-align: right;
}

.cal-cells a {
  color: var(--brand-alt);
  font-weight: bold;
  text-align: right;
}

.cal-prior-months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-family: var(--font-family-header);
}

.cal-prior-month {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.cal-no-posts {
  color: var(--text-lighter);
  text-decoration: none;
}

.archive-year-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.6em;
  margin-bottom: 0.75rlh;
  font-size: 0.85rem;
  font-family: var(--font-family-mono);
}

.archive-year-strip a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.archive-year-strip .cal-year-current {
  color: var(--brand-alt);
  font-weight: bold;
  text-decoration-style: solid;
}

/* Archive sparkline header (platform pages, blog archive, main index) */
.platform-sparkline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rlh;
  font-family: var(--font-family-header);
  text-align: center;
}

.platform-sparkline .sparkline {
  max-width: 7.5rem;
  height: auto;
}

.sparkline-caption {
  font-size: 0.75rem;
  color: var(--text-lighter);
  margin: 0;
}

/* Search component */
/* Pagefind — unlayered so these override pagefind-component-ui.css defaults */
:root {
    --pf-text: var(--text);
    --pf-text-secondary: var(--text-lighter);
    --pf-text-muted: var(--background-media);
    --pf-background: var(--background);
    --pf-border: var(--lines);
    --pf-border-focus: var(--brand-alt);
    --pf-hover: var(--brand);
    --pf-mark: var(--brand-alt);
    --pf-font: var(--font-family-header);
    --pf-outline-focus: var(--brand-alt);
    --pf-border-radius: 6px;
}

pagefind-searchbox {
    display: block;
    margin-inline: auto;
    max-width: 540px;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.1em;
}

.theme-toggle button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2em 0.3em;
    color: var(--text-lighter);
    font-size: inherit;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}

.theme-toggle button:hover,
.theme-toggle button.active {
    color: var(--brand-alt);
}

.search {
    margin-bottom: 2rlh;
    font-family: var(--font-family-header);
}
.search:empty {
    display: none;
}

/* Global post image handling for clean rendering */
.micropost-content-wrapper img,
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 0.75rem;
    border-radius: 4px;
}