/*
 * CSS for starbreaker.org
 * © 2025 Matthew Graybosch <contact@starbreaker.org>
 * Available under the terms of the GNU General Public License, version 3
 *
 * This stylesheet began as an attempt to create a more modern, consistent, and readable version of the default stylesheet browsers use when rendering a HTML document that does not specify a stylesheet or any inline styles.
 *
 * I thus attempt to style elements first, and override element styles with CSS classes.
 *
 * To help make the text more accessible, I specify the use of dyslexia-friendly fonts like Atkinson Hyperlegible first so that visitors who have these fonts installed will see my site rendered with them. Otherwise, the browser will work its way down the font stack to find other installed fonts.
 *
 * I also use media queries to provide styles that work well on desktop, but not necessarily on mobile. I also attempt to support high-resolution screens by adjusting the default font size at certain minimum widths: 768px, 1920px, and 2560px.
 *
 * Caveats & Limitations:
 *
 * 1. I do not (and will not) provide dark mode support. My research suggests that dark mode is grossly overrated. As nostalgic as I occasionally am for green or amber text on a black screen, that is a legacy of dumb terminals and a product of technological limitations. We should not feel obligated to faithfully emulate every aspect of the past, but should leave behind that which no longer serves us.
 *
 * 2. Opinions vary on whether a website's text should use the entire width of a browser window or be confined within a relatively narrow column. Some people find the former more readable, and others prefer the latter.
 *
 * For my part, I think that if I'm on a high-resolution, widescreen display, it's silly to maximize browser windows. Furthermore, I assume that individuals can narrow text on their own; widening a too-narrow column of text is rather more difficult.
 *
 * 3. All styles specified herein are ultimately an expression of my aesthetic opinions and how I want my website to look. Individual visitors are welcome to adjust their browser's zoom settings, use their browser's reader mode, or even -- if their browser was not developed by petty authoritarians bent on punishing the world because they didn't get their first kisses until after getting their first tech jobs -- specify their own stylesheets.
 *
 */


/* ROOT CSS VARIABLES */
:root {
    color-scheme: light;
    scroll-padding: 1.5rem;
    --font-size: medium;
    --system-sans: 'atkinson hyperlegible', system-ui, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', noto, 'noto sans', roboto, cantarell, ubuntu, helvetica, 'trebuchet ms', verdana, calibri, arial, sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol';
    --system-serif: ui-serif, 'iowan old style', 'apple garamond', baskerville, georgia, 'times new roman', 'droid serif', times, 'source serif pro', serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol';
    --system-mono: 'atkinson hyperlegible mono', 'berkeley mono', ui-monospace, menlo, monaco, 'noto mono', 'noto sans mono', 'cascadia code', consolas, 'liberation mono', 'lucida console', monospace;
    --color: black;
    --border-color: darkslategray;
    --background: white;
    --accent: whitesmoke;
    --backdrop: rgba(250 240 230 / .25);
    --link: mediumblue;
    --link-focus: darkblue;
    --link-active: skyblue;
    --link-visited: black;
    --shadow: 7px 7px 2px darkgray;
    --shadow-kbd: 2px 2px 1px darkgray;
    --border: medium solid var(--border-color);
    --border-thin: thin solid var(--border-color);
    --border-thick: thick solid var(--border-color);
}
/* FIX THE BOX-SIZING MODEL */
*, *::before, *::after {
    box-sizing: border-box;
}
/* <div> SHOULD HAVE NO MARGINS OR PADDING. THEY ARE CONTAINERS, NOTHING MORE. */
div {
    margin: 0;
    padding: 0;
}
/* CREATE A ROOT STACKING CONTEXT */
#root, #__next {
    isolation: isolate;
}
/* LET'S SET PAGE-WIDE TEXT DEFAULTS FOR BETTER READABILITY. */
html {
    font-size: var(--font-size);
    border-top: var(--border-thick);
    line-height: 1.666;
    letter-spacing: normal;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* FURTHER TEXT-RENDERING IMPROVEMENTS */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: 1.2;
}
/* LET'S DO SOMETHING ABOUT IMAGE/VIDEO DISPLAY */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}
blockquote, img, video, canvas, svg {
    border: var(--border);
    box-shadow: var(--shadow);
    margin: 1rem 0;
}
/* FORM CONTROLS SHOULD USE THE FONTS I SPECIFIED, BY CROM */
input, button, textarea, select {
    font: inherit;
}
/* COME ON, MOZILLA. GET YOUR SHIT TOGETHER AND SUPPORT CSS VIEW TRANSITIONS IN FIREFOX. */
@view-transition {
    navigation: auto;
}
::view-transition-group(*) {
    animation-duration: .5s;
}
::view-transition-old(root) {
    animation: .5s ease-in both leave;
}
::view-transition-new(root) {
    animation: .5s ease-in both enter;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) {
        animation-duration: 0s;
    }
}
/* ELEMENTS OF STYLE */
hr {
    border: var(--border-thin);
    margin: 1.25rem 0;
}
pre {
    tab-width: 4;
    white-space: pre-wrap;
    word-wrap: break-all;
    overflow-wrap: break-all;
}
pre, p, li, dt, tr {
    margin: 1rem 0;
}
dd {
    margin: 1rem 2rem;
}
h1, h2, h3, h4, h5, h6, dt {
    text-transform: uppercase;
    margin: 2rem 0 1rem 0;
}
menu, ul {
    padding-left: 1rem;
}
ol {
    padding-left: 1.66rem;
}
summary {
    text-transform: uppercase;
}
figure, figure > div, figure > blockquote, figure > picture, figcaption {
    margin: 1rem 0;
}
figure > pre, .source {
    background: var(--accent);
    padding: .5rem;
    border: var(--border);
}
dt, summary, caption, th, time, code {
    font-weight: bold;
}
code {
    font-size: 1rem;
}
figcaption {
    font-weight: bold;
    font-size: .75rem;
}
time {
    font-family: var(--system-mono);
}
header > h1 {
    margin: 1rem 0;
}
header > p {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
}
blockquote {
    border: var(--border-thick);
    padding: .1rem 1rem;
    background: var(--accent);
}
summary {
    margin: .5rem 0;
    cursor: pointer;
}
details {
    margin: 1rem 0;
}
details > aside, details > nav, details > div {
    border: var(--border);
    padding: 0 1rem;
    background: var(--accent);
}
table {
    margin: 1rem 0 2rem;
    border-collapse: collapse;
}
td, th {
    border: var(--border);
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
}
th {
    background-color: var(--accent);
}
caption {
    text-align: left;
    margin: 0 0 1rem;
}
li {
    margin: .2rem 0;
}
kbd {
    background-color: var(--accent);
    border: var(--border-thin);
    box-shadow: var(--shadow-kbd);
    color: var(--color);
    display: inline-block;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1;
    padding: 4px;
    white-space: nowrap;
}
button {
    padding: .1rem .25rem;
    font-weight: bold;
    background-color: var(--accent);
    border: var(--border);
    color: var(--color);
    box-shadow: var(--shadow-kbd);
}
button:hover {
    color: var(--accent);
    background-color: var(--color);
}
dialog > aside > h2:nth-child(1) {
    margin-top: 1rem;
}
/* LINK STYLING */
a {
    color: var(--link);
    text-underline-offset: .35rem;
}
small > a {
    text-underline-offset: .3rem;
}
a:active {
    color: var(--link-active);
}
a:visited {
    color: var(--link-visited);
}
a:focus:not(:has(img, svg, picture)), a:hover:not(:has(img, svg, picture)), a:visited:hover:not(:has(img, svg, picture)) {
    color: var(--link-focus);
    outline: thick dashed var(--link-focus);
    outline-offset: .25rem;
    text-decoration: none;
}
a[href^="http"]:not([href*="starbreaker.org"]):not(:has(img, svg, picture)):not(.webring), .external-link {
    padding-right: 1.25rem;
}
/* LET'S MARK EXTERNAL LINKS TO DISTINGUISH THEM FROM LINKS TO OTHER PAGES. */
a[href^="http"]:not([href*="starbreaker.org"]):not(:has(img, svg, picture)):not(.webring)::after, .external-link::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
    background-color: var(--color);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 75%;
    transform: translateY(0.25rem);
}
/* CUSTOM CLASSES */
.thin {
    border: var(--border-thin);
}
.big {
    font-size: 1.25rem;
}
.variable {
    font-family: var(--system-sans);
}
.serial > ul {
    list-style-type: none;
    padding-left: 0;
}
[aria-current='page'] {
    font-weight: bold;
}
.no-toc, .normal {
    font-size: 1rem;
}
.disclaimer {
    margin-top: 1rem;
    border-left: var(--border);
    border-right: var(--border);
    padding: .1rem 1rem;
    background: var(--accent);
}
.disclaimer h2, .breadcrumbs h2 {
    margin-top: 1rem;
}
.skip-nav, .flex-nav, .parasocial-links {
    font-weight: bold;
}
.skip-nav, .parasocial-links {
    padding-left: 1rem;
}
.breadcrumbs > ul {
    padding-left: 1rem;
}
.undecorated {
    border: none !important;
    box-shadow: none !important;
}
.center {
    text-align: center;
}
.rss {
    height: 1rem;
    width: 1rem;
}
.upcase {
    text-transform: uppercase;
}
.gallery-flex {
    display: grid;
    gap: .5rem 2rem;
    grid-template-columns: repeat(4, 1fr);
}
.gallery-flex > div {
    display: flex;
    flex-flow: column wrap;
    gap: .1rem;
}
.gallery-flex > div > figure {
    margin: 0;
}
.gallery-flex > div > figure > a {
    margin: 0 auto;
}
.right {
    text-align: right;
}
/* for messsages taken from my guestbook at atabook.org */
.box {
    background-color: var(--accent);
    padding: 5px 10px;
    color: var(--color);
    margin-bottom: 1rem;
    border: var(--border-thin);
}
.split {
    display: flex;
    justify-content: space-between;
}
.message p {
    margin-top: 8px;
    margin-bottom: 5px;
}
/* end guestbook css */
/*
 *
 * fun with popovers
 *
 */
[popover] {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    max-width: 95%;
    max-height: 90%;
    margin: auto;
    border: var(--border);
    padding: 1rem;
    overflow: auto;
    color: var(--color);
    background-color: var(--accent);
    box-shadow: var(--shadow);
}
dialog::backdrop {
    background-color: var(--backdrop);
}
input::placeholder {
    font-weight: bold !important;
    opacity: 0.9 !important;
    color: #16161d !important;
}
/* PROGRESSIVE ENHANCEMENT FOR REAL COMPUTERS */
@media only screen and (min-width: 768px) {
    body {
        margin: 2rem 2rem 1rem;
    }
    .skip-nav, .flex-nav, .parasocial-links {
        padding-left: 0;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .topics-list, .multi-col-toc > ul, .breadcrumbs > ul {
        padding-left: 0;
    }
    .topics-list, .multi-col-toc > ul {
        list-style-type: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
        gap: .5rem 1rem;
    }
    .breadcrumbs > ul> li:nth-child(1) {
        list-style-type: none;
    }
    .breadcrumbs > ul> li:nth-child(2), .breadcrumbs > ul> li:nth-child(3), .breadcrumbs > ul> li:nth-child(4), .breadcrumbs > ul> li:nth-child(5) {
        margin-left: 1.2rem;
        list-style-type: "↳ ";
    }
    .breadcrumbs > ul> li:nth-child(3) {
        margin-left: 2.4rem;
    }
    .breadcrumbs > ul> li:nth-child(4) {
        margin-left: 3.6rem;
    }
    .breadcrumbs > ul> li:nth-child(5) {
        margin-left: 4.8rem;
    }
    .author-flex, .footer-flex, .breadcrumbs-flex {
        display: flex;
        flex-direction: row;
        gap: 1rem 2rem;
    }
    .breadcrumbs-flex {
        gap: 1rem 4rem;
    }
}
@media only screen and (min-width: 1366px) {
    :root {
        --font-size: large;
    }
    [popover] {
        max-width: 50%;
    }
    .half-width {
        max-width: 50%;
    }
}
@media only screen and (min-width: 1920px) {
    :root {
        --font-size: x-large;
    }
}
@media only screen and (min-width: 2560px) {
    :root {
        --font-size: xx-large;
    }
}