/* morel.pleroma.nexus. Written by hand: a night sky, some honey, and a mushroom.
   One stylesheet for every page. No scripts, no downloads, nothing fetched from anywhere
   (the "www.w3.org" strings below are SVG namespace names inside inline pictures, not requests).

   Contents
     1. colours and measures
     2. the page: sky, honeycomb corner, stars
     3. reading: headings, paragraphs, links, lists
     4. the masthead: title, .sub, nav
     5. pictures and figures
     6. tables, code, quotes, small furniture
     7. controls (buttons, inputs) for pages that have them
     8. footer
     9. small screens, reduced motion, high contrast
    10. print
*/

/* ---------- 1. colours and measures ---------- */
:root {
    /* the five originals; values must not change, other pages rely on them */
    --night: #0b1224;
    --dusk: #182c3e;
    --teal: #7fb8c4;
    --honey: #e6c27a;
    --cream: #e9e2cf;

    /* additions */
    --line: #2b4656;            /* hairlines and borders (decorative) */
    --line-soft: #223a4b;       /* quieter hairline */
    --muted: #9fb2bc;           /* small print; AA on both --night and --dusk */
    --panel: rgba(11, 18, 36, .55);   /* a darker pane for code, tables, picture mats */
    --glow: rgba(230, 194, 122, .10); /* honey, barely */
    --measure: 36rem;           /* the reading column */
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
    --mono: "Courier New", Courier, "Liberation Mono", monospace;

    color-scheme: dark;
}

/* ---------- 2. the page ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--dusk) linear-gradient(var(--night), var(--dusk) 60rem) no-repeat;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--line) var(--night);
}

body {
    margin: 0 auto;
    padding: 3.25rem 1.5rem 4.5rem;
    max-width: calc(var(--measure) + 3rem);
    color: var(--cream);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    /* no background here on purpose: the sky lives on <html> so the two
       decorations below can sit between the sky and the words */
}

/* a corner of honeycomb, top right, fading out like comb seen by lamplight */
body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; left: 0; right: 0;
    height: 26rem;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72' viewBox='0 0 42 72'%3E%3Cpath d='M21 0L42 12V36L21 48L0 36V12ZM21 48V72' fill='none' stroke='%23e6c27a' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 42px 72px repeat;
    -webkit-mask-image: radial-gradient(ellipse 75% 100% at 88% 0, #000 0, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 100% at 88% 0, #000 0, transparent 72%);
}

/* a dozen stars, mostly out at the edges, none of them moving */
body::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; left: 0; right: 0;
    height: 34rem;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 6% 9%,   rgba(233, 226, 207, .75) 0, rgba(233, 226, 207, .75) .7px, transparent 1.4px),
        radial-gradient(circle at 13% 31%, rgba(233, 226, 207, .45) 0, rgba(233, 226, 207, .45) .6px, transparent 1.2px),
        radial-gradient(circle at 3% 58%,  rgba(127, 184, 196, .55) 0, rgba(127, 184, 196, .55) .6px, transparent 1.2px),
        radial-gradient(circle at 21% 4%,  rgba(233, 226, 207, .50) 0, rgba(233, 226, 207, .50) .5px, transparent 1.1px),
        radial-gradient(circle at 38% 2.5%, rgba(230, 194, 122, .60) 0, rgba(230, 194, 122, .60) .7px, transparent 1.4px),
        radial-gradient(circle at 57% 5%,  rgba(233, 226, 207, .40) 0, rgba(233, 226, 207, .40) .5px, transparent 1.1px),
        radial-gradient(circle at 9% 82%,  rgba(233, 226, 207, .35) 0, rgba(233, 226, 207, .35) .5px, transparent 1.1px),
        radial-gradient(circle at 94% 47%, rgba(233, 226, 207, .55) 0, rgba(233, 226, 207, .55) .6px, transparent 1.2px),
        radial-gradient(circle at 86% 71%, rgba(127, 184, 196, .45) 0, rgba(127, 184, 196, .45) .5px, transparent 1.1px),
        radial-gradient(circle at 97% 88%, rgba(233, 226, 207, .45) 0, rgba(233, 226, 207, .45) .6px, transparent 1.2px),
        radial-gradient(circle at 17% 66%, rgba(230, 194, 122, .40) 0, rgba(230, 194, 122, .40) .5px, transparent 1.1px),
        radial-gradient(circle at 90% 96%, rgba(233, 226, 207, .30) 0, rgba(233, 226, 207, .30) .5px, transparent 1.1px);
    background-repeat: no-repeat;
}

main { display: block; }

::selection { background: var(--honey); color: var(--night); }

/* ---------- 3. reading ---------- */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: normal;
    line-height: 1.25;
    text-wrap: balance;
}

h1 {
    margin: 0 0 .3rem;
    font-size: 2.6rem;
    font-size: clamp(2.3rem, 1.9rem + 2.2vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: .015em;
    color: var(--honey);
}

h2 {
    margin: 3rem 0 .7rem;
    padding-bottom: .4rem;
    font-size: 1.3rem;
    letter-spacing: .01em;
    color: var(--teal);
    /* a hairline that trails off to the right instead of a full rule */
    background: linear-gradient(90deg, var(--line), rgba(43, 70, 86, 0)) left bottom / 100% 1px no-repeat;
}

/* one small cell of comb before each section heading */
h2::before {
    content: "";
    display: inline-block;
    width: .62em;
    height: .7em;
    margin-right: .5em;
    vertical-align: .02em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 1L13 4.5V11.5L7 15L1 11.5V4.5Z' fill='%23e6c27a' fill-opacity='.18' stroke='%23e6c27a' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

h3 {
    margin: 2.1rem 0 .4rem;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--honey);
}

h4 {
    margin: 1.6rem 0 .3rem;
    font-size: .92rem;
    letter-spacing: .09em;
    text-transform: lowercase;
    font-variant: small-caps;
    color: var(--teal);
}

p { margin: 0 0 1.05rem; text-wrap: pretty; }

a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: rgba(127, 184, 196, .55);
    transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover, a:active {
    color: var(--honey);
    text-decoration-color: var(--honey);
}

/* keyboard focus: a honey ring, always visible on the dark page */
:focus-visible {
    outline: 2px solid var(--honey);
    outline-offset: 3px;
    border-radius: 2px;
}

strong, b { color: #f4eedd; }
em, i { font-style: italic; }
small { font-size: .86em; color: var(--muted); }
mark { background: var(--honey); color: var(--night); padding: 0 .15em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
sup, sub { line-height: 0; font-size: .75em; }

ul, ol { margin: 0 0 1.05rem; padding-left: 1.45rem; }
li { margin: .4rem 0; padding-left: .2rem; }
li > ul, li > ol { margin: .3rem 0 .2rem; }
/* bullets are small honey hexagons; a plain disc if the picture can't be drawn */
ul { list-style: disc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10'%3E%3Cpath d='M4.5 .6L8.4 2.8V7.2L4.5 9.4L.6 7.2V2.8Z' fill='%23e6c27a' fill-opacity='.8'/%3E%3C/svg%3E"); }
li::marker { color: var(--honey); }

dl { margin: 0 0 1.05rem; }
dt { margin-top: .8rem; color: var(--honey); font-style: italic; }
dd { margin: .1rem 0 0 1.45rem; }

/* ---------- 4. the masthead ---------- */
.skip {
    position: absolute;
    left: .75rem;
    top: -4rem;
    z-index: 10;
    padding: .45rem .8rem;
    background: var(--honey);
    color: var(--night);
    font-size: .95rem;
    text-decoration: none;
    border-radius: 2px;
}
.skip:focus { top: .75rem; color: var(--night); outline-color: var(--cream); }

.sub {
    margin: 0 0 1.7rem;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--teal);
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1.5rem;
    margin: 0 0 2.5rem;
    padding: .45rem 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-size: .98rem;
    letter-spacing: .035em;
}
nav a {
    padding: .3rem 0;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
nav a:hover { border-bottom-color: var(--honey); }
/* add aria-current="page" to the link for the page you are on */
nav a[aria-current="page"] {
    color: var(--honey);
    border-bottom-color: rgba(230, 194, 122, .6);
}

/* ---------- 5. pictures and figures ---------- */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

/* .picture: a framed picture with a dark mat, centred */
.picture {
    display: block;
    width: 100%;
    max-width: 314px;           /* 300px picture + mat + border */
    height: auto;
    margin: 2rem auto;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: 0 0 2.5rem var(--glow);
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* .frame: put this on a link that wraps a .picture, so the link is a tidy block */
a.frame {
    display: block;
    max-width: 314px;
    margin: 2rem auto;
    border-radius: 2px;
}
a.frame .picture { margin: 0; }
a:hover > .picture, a:focus-visible > .picture {
    border-color: var(--honey);
    box-shadow: 0 0 3rem rgba(230, 194, 122, .18);
}

figure { margin: 2rem 0; text-align: center; }
figure > img, figure > svg, figure > canvas, figure > video { display: block; margin: 0 auto; }
figure > .picture { margin: 0 auto; }
figure > table, figure > pre { text-align: left; }
figcaption {
    margin: .7rem auto 0;
    max-width: 30rem;
    font-size: .9rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--muted);
}

/* ---------- 6. tables, code, quotes, small furniture ---------- */
table {
    width: 100%;
    margin: 1.6rem 0;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.5;
    font-variant-numeric: lining-nums tabular-nums;
}
caption {
    caption-side: bottom;
    padding-top: .6rem;
    font-size: .9rem;
    font-style: italic;
    color: var(--muted);
    text-align: left;
}
th, td {
    padding: .5rem .9rem .5rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}
th:last-child, td:last-child { padding-right: 0; }
thead th {
    font-weight: normal;
    font-variant: small-caps;
    letter-spacing: .07em;
    color: var(--teal);
    border-bottom: 1px solid var(--line);
    vertical-align: bottom;
}
tbody th { font-weight: normal; color: var(--honey); }
tbody tr:last-child > * { border-bottom: 0; }
/* wrap a wide table in <div class="table-wrap"> to let it scroll sideways on phones */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.table-wrap > table { margin: 0; }

code, kbd, samp, pre { font-family: var(--mono); }
code, samp {
    font-size: .9em;
    color: var(--honey);
    background: var(--panel);
    padding: .08em .32em;
    border-radius: 2px;
}
kbd {
    font-size: .85em;
    color: var(--cream);
    padding: .08em .4em;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 3px;
}
pre {
    margin: 1.4rem 0;
    padding: .9rem 1.1rem;
    overflow-x: auto;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--cream);
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--honey);
    border-radius: 2px;
    -moz-tab-size: 4;
    tab-size: 4;
}
pre code { font-size: inherit; color: inherit; background: none; padding: 0; }

blockquote {
    margin: 1.5rem 0;
    padding: .1rem 0 .1rem 1.2rem;
    border-left: 2px solid var(--line);
    font-style: italic;
    color: #d6d3c6;
}
blockquote > :last-child { margin-bottom: 0; }

/* <hr> and the footer share one divider: a hairline with three cells of comb in the middle */
hr, footer::before {
    height: 14px;
    border: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='14' viewBox='0 0 52 14'%3E%3Cg fill='none' stroke='%23e6c27a' stroke-opacity='.75' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M8 1L13.2 4V10L8 13L2.8 10V4Z'/%3E%3Cpath d='M26 1L31.2 4V10L26 13L20.8 10V4Z' fill='%23e6c27a' fill-opacity='.3'/%3E%3Cpath d='M44 1L49.2 4V10L44 13L38.8 10V4Z'/%3E%3C/g%3E%3C/svg%3E") center / 52px 14px no-repeat,
        linear-gradient(90deg,
            rgba(43, 70, 86, 0), var(--line) 22%, var(--line) calc(50% - 36px),
            rgba(43, 70, 86, 0) calc(50% - 36px), rgba(43, 70, 86, 0) calc(50% + 36px),
            var(--line) calc(50% + 36px), var(--line) 78%, rgba(43, 70, 86, 0)) center / 100% 1px no-repeat;
}
hr { margin: 2.8rem 0; }

details { margin: 1.2rem 0; }
summary { cursor: pointer; color: var(--teal); }
summary:hover { color: var(--honey); }
details[open] > summary { margin-bottom: .6rem; }

article + article { margin-top: .5rem; }

/* .date: a small-caps line under a heading */
.date {
    margin: 0 0 .9rem;
    font-size: .92rem;
    font-variant: small-caps;
    letter-spacing: .06em;
    color: var(--teal);
}
h2 + .date, h3 + .date { margin-top: -.25rem; }

/* ---------- 7. controls ---------- */
button, input, select, textarea {
    font: inherit;
    color: var(--cream);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
}
input, select, textarea { padding: .35rem .55rem; max-width: 100%; }
input[type="checkbox"], input[type="radio"], input[type="range"] {
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--honey);
}
button, input[type="button"], input[type="submit"], input[type="reset"] {
    padding: .4rem .95rem;
    color: var(--honey);
    border-color: rgba(230, 194, 122, .5);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background: rgba(230, 194, 122, .12);
    border-color: var(--honey);
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
    color: var(--muted);
    border-color: var(--line-soft);
    cursor: not-allowed;
}
::placeholder { color: var(--muted); opacity: 1; }
label { cursor: pointer; }

/* ---------- 8. footer ---------- */
footer {
    margin-top: 4rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
}
footer::before {
    content: "";
    display: block;
    margin-bottom: 1.5rem;
}
footer img {
    vertical-align: middle;
    margin: 0 .7rem .15rem 0;
    image-rendering: pixelated;   /* the 88x31 button is pixel art; keep it crisp */
}
footer p { margin: .5rem 0 0; }

/* ---------- 9. small screens, reduced motion, high contrast ---------- */
@media (max-width: 30rem) {
    body { padding: 2.25rem 1.1rem 3.5rem; font-size: 1rem; line-height: 1.65; }
    h2 { margin-top: 2.5rem; font-size: 1.22rem; }
    nav { gap: 0 1.25rem; margin-bottom: 2rem; }
    ul, ol { padding-left: 1.25rem; }
    th, td { padding-right: .6rem; }
    body::before { height: 20rem; }
}

@media (min-width: 64rem) {
    body { padding-top: 4.5rem; font-size: 1.125rem; }
}

/* nothing on these pages moves by itself, but hover fades and anything a later page
   animates are switched off for readers who ask for stillness */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    :root { --line: #5d7f92; --line-soft: #4a6b7e; --muted: #c9d5db; }
    body::before, body::after { display: none; }
    a { text-decoration-color: currentColor; }
}

@media (forced-colors: active) {
    body::before, body::after, h2::before { display: none; }
    h2 { border-bottom: 1px solid; }
    nav a[aria-current="page"] { border-bottom-color: currentColor; }
}

/* ---------- 10. print ---------- */
@media print {
    @page { margin: 20mm 18mm; }
    html { background: #fff; }
    body {
        max-width: none;
        padding: 0;
        color: #111;
        font-size: 11pt;
        line-height: 1.5;
    }
    body::before, body::after, nav, .skip { display: none; }
    h1 { color: #000; font-size: 24pt; }
    h2 { color: #222; font-size: 14pt; margin-top: 18pt; background: none; border-bottom: .5pt solid #999; }
    h3, dt, tbody th { color: #222; }
    h4, .sub, .date, summary { color: #444; }
    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
    li, figure, pre, blockquote, tr, img { break-inside: avoid; page-break-inside: avoid; }
    a { color: #111; text-decoration-color: #777; }
    /* say where outside links go, since paper can't be clicked */
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        font-style: normal;
        color: #444;
        word-break: break-all;
    }
    strong, b { color: #000; }
    small, figcaption, caption, footer { color: #444; }
    mark { background: none; color: #000; border-bottom: 1pt solid #000; }
    .picture {
        max-width: 60mm;
        padding: 0;
        background: none;
        border: .5pt solid #999;
        box-shadow: none;
    }
    a.frame { max-width: 60mm; }
    code, samp, kbd, pre { color: #111; background: none; }
    pre { border: .5pt solid #999; border-left: 2pt solid #777; white-space: pre-wrap; }
    kbd { border-color: #777; }
    blockquote { color: #222; border-left-color: #999; }
    th, td, thead th { border-bottom-color: #bbb; }
    thead th { color: #222; }
    button, input, select, textarea { color: #111; background: none; border-color: #777; }
    hr, footer::before {
        height: 0;
        background: none;
        border-top: .5pt solid #999;
    }
    footer { margin-top: 24pt; }
    footer::before { margin-bottom: 10pt; }
}

/* added while putting the pieces together */
img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.spores { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.2rem; }
.spores figure { margin: 0 0 1.2rem; }
.spores figcaption { font-size: .85rem; color: #a9bcc4; }
.stamps img { vertical-align: middle; margin: 0 .8rem .6rem 0; }
.mine { border-left: 2px solid var(--honey); padding-left: .9rem; }