/* =====================
Colors
===================== */
:root {
---ink:    #e8e3db;
--paper:  #1c1917;
--rule:   #3a3530;
--accent: #97a7a7;
--muted:  #8a857d;
--font-head: "Georgia", "Times New Roman", serif;
--font-body: "Georgia", "Times New Roman", serif;
--font-ui:   "Courier New", "Courier", monospace;
}

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

html {
background-color:(--paper);
min-width:100%;
min-height:100%;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: var(--font-body);
}

body {
background: var(--paper);
color: var(--ink);
max-width: 680px;
margin:  auto auto;
padding: 3rem 1.5rem 6rem;
line-height: 1.7;
font-size: 1.0625rem;
background-color: Canvas;
color: CanvasText;
color-scheme: light dark;
}

/* =====================
MASTHEAD
===================== */
.masthead {
padding-bottom: 1.25rem;
}

.masthead h1 {
font-family: var(--font-head);
font-size: clamp(1.75rem, 5vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}

.masthead h1 a {
color: inherit;
text-decoration: none;
}

.masthead h1 a:hover { text-decoration:underline; }

/* =====================
PAGINATION NAV
===================== */
.pagination {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 1rem;
font-family: var(--font-ui);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}

.pagination span { margin-right: 0.25rem; }

.pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--rule);
color: var(--ink);
text-decoration: none;
font-weight: 700;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pagination a:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}

/* =====================
DEFAULT STATE
===================== */
.page,
.full-post { display: none; scroll-margin-top: 999em;}

/* Show page 1 if nothing is targeted */
body:not(:has(:target)) #page-1 { display: block; }

/* Show targeted page */
.page:target { display: block; }

/* =====================
POST LIST
===================== */
.post-list { list-style: none; }

.post-list li {
border-bottom: 1px solid var(--rule);
}

.post-list li:first-child {
border-top: 1px solid var(--rule);
}

.post-list a {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 1rem 0;
color: var(--ink);
text-decoration: none;
font-family: var(--font-head);
font-size: 1.125rem;
}

.post-list .post-date {
font-family: var(--font-ui);
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
}

/* =====================
FULL POST VIEW
===================== */
.full-post:target { display: block; }

/* When a post is open, hide pages and pagination */
body:has(.full-post:target) .page,
body:has(.full-post:target) .masthead,
body:has(.full-post:target) .pagination { display: none; }

.back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-ui);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
margin-bottom: 2rem;
transition: color 0.15s;
display:none;
}

.back-link:hover { color: var(--accent); }

.full-post h2 {
font-family: var(--font-head);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 0.5rem;
}

.post-meta {
font-family: var(--font-ui);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--rule);
}

.full-post .content p { margin-bottom: 1.25rem; }
.full-post .content p:last-child { margin-bottom: 0; }

.full-post .content h3,
.full-post .content h4 {
font-family: var(--font-head);
margin: 1.75rem 0 0.5rem;
}

.full-post .content a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}

.full-post .content blockquote {
border-left: 3px solid var(--accent);
padding-left: 1.25rem;
margin: 1.5rem 0;
color: var(--muted);
font-style: italic;
}

.full-post .content pre,
.full-post .content code {
font-family: var(--font-ui);
font-size: 0.875rem;
background: color-mix(in srgb, var(--ink) 6%, transparent);
border-radius: 3px;
}

.full-post .content pre {
padding: 1rem 1.25rem;
margin: 1.5rem 0;
overflow-x: auto;
}

.full-post .content code { padding: 0.15em 0.4em; }
.full-post .content pre code { padding: 0; background: none; }

.flextitle {
max-width:600px;
height:40px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
margin:20px 0px 20px 60px;
}

.banner {
font-size:x-large;
}

.banner, .otherlinks a {
color:floralwhite;
}

.banner:visited, .otherlinks a:visited {
	color:floralwhite;
	background-color:darkslategray;
}

.otherlinks {
flex-direction:row;
gap:10px;
display:flex;
align-items:center;
}

.posttag, .posttag:visited {
	color:#cccccc;
}

main {
max-width: 600px ;
margin:0px 0px 0px 40px;
background-color:#1d1f21;
line-height:1.6;
padding:20px 20px 20px 20px;
display:flex;
flex-direction:column;
gap:30px;
border-radius:4px;
}

.container {
justify-content:space-between;
display:flex;
flex-direction:column;
}

figure {
display:inline-block;
margin:0;
}


.smallimage img {
max-height: 300px;
max-width:100%;
display:block;
min-width:0px;
border-radius:4px;
}


.extrasmallimage img {
max-height: 200px;
max-width:100%;
display:block;
min-width:0px;
border-radius:4px;
}

.figimage {
max-width:100%;
}


figure.largeimage img {
max-height: 800px;
max-width:100%;
display:block;
min-width:0px;
}

footer {
text-align: center ;
clear: both ;
}

.postlinks {
padding-left:0px;
margin:0px;
display:flex;
flex-direction:column;
gap:8px;
}

.posttitle {
margin-top:0px;
margin-bottom:0px;
max-width:800px;
margin-left:auto;
margin-right:auto;
color:#5e8d87;
}

article > time {
	display:inline-block;
	margin:20px 0px 20px 0px;
}

.posttitle a:visited {
color:inherit;
}

.taxlinks {
max-width:800px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:8px;
justify-content:start;
border: 1px solid darkslategray;
padding:4px 8px 4px 8px;
align-items:center;
}

.mainlinks {
gap:8px;
max-width:600px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:start;
align-items:center;
display:flex;
}


.mainlinks a, .mainlinks a:visited {
color:#ccc;
}

.views {
display:inline-block;
float:right;
display:flex;
justify-content:center;
align-items:center;
}

.taxlinks a, .taxlinks a:visited {
color:darkcyan;
}

li a:hover {text-decoration:underline;}

a img {
display:block;
padding:0;
margin:auto;
}

a {
color:#5f819d;
text-decoration:none;
}

a:hover
{text-decoration:underline;}

code {
word-wrap:normal;
white-space:pre;
text-wrap:wrap;
}

pre {
padding:10px;
overflow-x:auto;
background-color:#1A1D20;
text-wrap:wrap;
word-wrap: break-word;
overflow-wrap: break-word;
border:1px solid #5e8d87;
border-radius:4px;
}

::-webkit-scrollbar{
background: #444444;
}
::-webkit-scrollbar-thumb{
background: #686868;
}

.postlinks {
list-style-type: none;
}

#thumb {
object-fit:cover;
height:150px;
width:150px;
display:block;
border-radius:4px;
margin-bottom:4px;
}

figcaption {
font-style:italic;
color:#b1b1b1;
font-size:smaller;
}

.updatetext, .updatenote {
color:#5e8d87;
}

.end {
color:darkslategray;
text-align:end;
}

.webring {
display:inline-block;
}

.webring::before {
content:"Webring:";
}

.videocontainer, .video-player {
max-width:400px;
color:darkgray;
}

.flex {
display:flex;
}

/* Mobile rules here */

@media screen and (max-width: 35em) {
	main {border-radius:0px;margin:auto;border-left:none;border-right:none;}
        .flextitle {flex-direction:column;align-items:start;margin-left:20px;margin-bottom:20px;height:unset;gap:10px;}
	.flex {flex-direction:column;}
	.extrasmallimage img {max-width:100%;max-height:400px;}
	audio {border-radius:unset;background-color:unset;}
}