/*
 * The Digital Cairn: Visual Foundations
 *
 * This stylesheet defines the atmosphere of Nordr. 
 * It is built for longevity and clarity, ensuring that 
 * the presence remains visible across decades of hardware.
 */

/* --- The Dark Scheme: A quiet room in the late hours --- */

body[scheme="dark"] {
	background-color: #0f1115;
	color: #e6e8eb;
}

body[scheme="dark"] ::selection {
	background-color: #d9c18f;
	color: #e6e8eb;
}

body[scheme="dark"] ::-moz-selection {
	background-color: #d9c18f;
	color: #e6e8eb;
}

body[scheme="dark"] a:focus,
body[scheme="dark"] button:focus,
body[scheme="dark"] summary:focus {
	outline: 2px solid #d9c18f;
}

body[scheme="dark"] a {
	color: #8fb3d9;
}

body[scheme="dark"] a:visited {
	color: #7f9fbf;
}

body[scheme="dark"] details {
	border: thin solid #5f6470;
	margin-top: 1px;
}

body[scheme="dark"] details summary {
	color: #e6e8eb;
	cursor: pointer;
}

body[scheme="dark"] details[open] summary {
	border-bottom: 1px solid #5f6470;
}

body[scheme="dark"] pre {
	background: #0f1115;
}

body[scheme="dark"] .download-box,
body[scheme="dark"] code:not(pre>code) {
	border: thin solid #5f6470;
}

body[scheme="dark"] *:target {
	background: #d9c18f;
	color: #e6e8eb;
}

body[scheme="dark"] table,
body[scheme="dark"] th,
body[scheme="dark"] td {
	border: thin solid #5f6470;
}

body[scheme="dark"] .meta,
body[scheme="dark"] .toc {
	border: thin solid #5f6470;
	padding: 1rem;
}

body[scheme="dark"] figcaption {
	color: #a6aab3;
}

body[scheme="dark"] blockquote {
	border: thin solid #5f6470;
}

body[scheme="dark"] .notification {
	border: thin solid #5f6470;
	padding: 1rem;
}

body[scheme="dark"] .notification.normal {
	background-color: #1a2433;
}

body[scheme="dark"] .notification.danger {
	background-color: #2a1a1d;
}

/* --- The Light Scheme: Paper-like stillness for the morning --- */

body[scheme="light"] {
	background-color: #f4f1ec;
	color: #1a1c20;
}

body[scheme="light"] ::selection {
	background-color: #b89b5e;
	color: #1a1c20;
}

body[scheme="light"] ::-moz-selection {
	background-color: #b89b5e;
	color: #1a1c20;
}

body[scheme="light"] a:focus,
body[scheme="light"] button:focus,
body[scheme="light"] summary:focus {
	outline: 2px solid #b89b5e;
}

body[scheme="light"] a {
	color: #3a6ea5;
}

body[scheme="light"] a:visited {
	color: #345f8c;
}

body[scheme="light"] details {
	border: thin solid #9aa0ab;
	margin-top: 1px;
}

body[scheme="light"] details summary {
	color: #1a1c20;
	cursor: pointer;
}

body[scheme="light"] details[open] summary {
	border-bottom: 1px solid #9aa0ab;
}

body[scheme="light"] pre {
	background: #f4f1ec;
	border: thin solid #9aa0ab;
}

body[scheme="light"] .download-box,
body[scheme="light"] code:not(pre>code) {
	border: thin solid #9aa0ab;
}

body[scheme="light"] *:target {
	background: #b89b5e;
	color: #1a1c20;
}

body[scheme="light"] table,
body[scheme="light"] th,
body[scheme="light"] td {
	border: thin solid #9aa0ab;
}

body[scheme="light"] .meta,
body[scheme="light"] .toc {
	border: thin solid #9aa0ab;
	padding: 1rem;
}

body[scheme="light"] figcaption {
	color: #5f6470;
}

body[scheme="light"] blockquote {
	border: thin solid #9aa0ab;
}

body[scheme="light"] .notification {
	border: thin solid #9aa0ab;
	padding: 1rem;
}

body[scheme="light"] .notification.normal {
	background-color: #e8edf3;
}

body[scheme="light"] .notification.danger {
	background-color: #f1e6e8;
}

/* --- Adaptive Schemes: Following the sun's journey --- */

@media (prefers-color-scheme: dark) {
	body[scheme="auto"] {
		background-color: #0f1115;
		color: #e6e8eb;
	}

	body[scheme="auto"] ::selection {
		background-color: #d9c18f;
		color: #e6e8eb;
	}

	body[scheme="auto"] ::-moz-selection {
		background-color: #d9c18f;
		color: #e6e8eb;
	}

	body[scheme="auto"] a:focus,
	body[scheme="auto"] button:focus,
	body[scheme="auto"] summary:focus {
		outline: 2px solid #d9c18f;
	}

	body[scheme="auto"] a {
		color: #8fb3d9;
	}

	body[scheme="auto"] a:visited {
		color: #7f9fbf;
	}

	body[scheme="auto"] details {
		border: thin solid #5f6470;
		margin-top: 1px;
	}

	body[scheme="auto"] details summary {
		color: #e6e8eb;
		cursor: pointer;
	}

	body[scheme="auto"] details[open] summary {
		border-bottom: 1px solid #5f6470;
	}

	body[scheme="auto"] pre {
		background: #0f1115;
	}

	body[scheme="auto"] .download-box,
	body[scheme="auto"] code:not(pre>code) {
		border: thin solid #5f6470;
	}

	body[scheme="auto"] *:target {
		background: #d9c18f;
		color: #e6e8eb;
	}

	body[scheme="auto"] table,
	body[scheme="auto"] th,
	body[scheme="auto"] td {
		border: thin solid #5f6470;
	}

	body[scheme="auto"] .meta,
	body[scheme="auto"] .toc {
		border: thin solid #5f6470;
		padding: 1rem;
	}

	body[scheme="auto"] figcaption {
		color: #a6aab3;
	}

	body[scheme="auto"] blockquote {
		border: thin solid #5f6470;
	}

	body[scheme="auto"] .notification {
		border: thin solid #5f6470;
		padding: 1rem;
	}

	body[scheme="auto"] .notification.normal {
		background-color: #1a2433;
	}

	body[scheme="auto"] .notification.danger {
		background-color: #2a1a1d;
	}
}

@media (prefers-color-scheme: light) {
	body[scheme="auto"] {
		background-color: #f4f1ec;
		color: #1a1c20;
	}

	body[scheme="auto"] ::selection {
		background-color: #b89b5e;
		color: #1a1c20;
	}

	body[scheme="auto"] ::-moz-selection {
		background-color: #b89b5e;
		color: #1a1c20;
	}

	body[scheme="auto"] a:focus,
	body[scheme="auto"] button:focus,
	body[scheme="auto"] summary:focus {
		outline: 2px solid #b89b5e;
	}

	body[scheme="auto"] a {
		color: #3a6ea5;
	}

	body[scheme="auto"] a:visited {
		color: #345f8c;
	}

	body[scheme="auto"] details {
		border: thin solid #9aa0ab;
		margin-top: 1px;
	}

	body[scheme="auto"] details summary {
		color: #1a1c20;
		cursor: pointer;
	}

	body[scheme="auto"] details[open] summary {
		border-bottom: 1px solid #9aa0ab;
	}

	body[scheme="auto"] pre {
		background: #f4f1ec;
		border: thin solid #9aa0ab;
	}

	body[scheme="auto"] .download-box,
	body[scheme="auto"] code:not(pre>code) {
		border: thin solid #9aa0ab;
	}

	body[scheme="auto"] *:target {
		background: #b89b5e;
		color: #1a1c20;
	}

	body[scheme="auto"] table,
	body[scheme="auto"] th,
	body[scheme="auto"] td {
		border: thin solid #9aa0ab;
	}

	body[scheme="auto"] .meta,
	body[scheme="auto"] .toc {
		border: thin solid #9aa0ab;
		padding: 1rem;
	}

	body[scheme="auto"] figcaption {
		color: #5f6470;
	}

	body[scheme="auto"] blockquote {
		border: thin solid #9aa0ab;
	}

	body[scheme="auto"] .notification {
		border: thin solid #9aa0ab;
		padding: 1rem;
	}

	body[scheme="auto"] .notification.normal {
		background-color: #e8edf3;
	}

	body[scheme="auto"] .notification.danger {
		background-color: #f1e6e8;
	}
}

/* --- Core Elements: The rhythm of the monospace --- */

html {
	height: 100%;
}

body {
	font-family: "Fira Mono", monospace;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	min-height: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

h2,
h3,
h4,
h5,
h6 {
	margin-top: 1.5rem;
}

p {
	margin: 1rem 0;
}

li {
	margin: 0.4rem 0;
}

a {
	text-decoration: underline;
}

a:hover {
	opacity: .8;
}

a:focus,
button:focus,
summary:focus {
	outline-offset: 2px;
}

/* The horizontal rule: A boundary between thoughts */
hr {
	text-align: center;
	border: 0;
	margin: 2rem 0;
}

hr:before {
	content: "------/";
}

hr:after {
	content: "/------";
}

pre {
	padding: 1em;
	overflow-x: auto;
}

table {
	width: 100%;
}

table th {
	font-weight: 800;
}
table,
th,
td {
	border-collapse: collapse;
	padding: 0.4rem;
}

code {
	text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

code:not(pre>code) {
	padding: 0.1em 0.2em;
	font-size: 90%;
}

blockquote {
	padding: 1rem;
}

blockquote p {
	margin: 0;
}

img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

figcaption {
	text-align: center;
	opacity: 0.8;
	font-size: 12px;
}

details {
	padding: 1rem;
}

details summary {
	text-decoration: none;
}

details[open] summary {
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}

/* --- Layout: The frame of the presence --- */

.main {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
}

.header p {
	font-size: 12px;
}

figure {
	margin: 0;
}

.toc li {
	margin: 0;
}
.article-item {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.article-date {
	font-feature-settings: "ss01";
	flex-shrink: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.article-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
}

.article-title {
	white-space: nowrap;
}

.readmore {
	font-style: italic;
}

/* --- Syntax Highlighting: The Chroma Palette (Light) --- */

@media (prefers-color-scheme: light) {
	.bg {
		color: #4c4f69;
		background-color: #eff1f5
	}

	pre {
		color: #4c4f69;
		background-color: #eff1f5
	}

	.chroma .err {
		color: #d20f39
	}

	.chroma .lnlinks {
		outline: none;
		text-decoration: none;
		color: inherit
	}

	.chroma .lntd {
		vertical-align: top;
		padding: 0;
		margin: 0;
		border: 0
	}

	.chroma .lntable {
		border-spacing: 0;
		padding: 0;
		margin: 0;
		border: 0
	}

	.chroma .hl {
		background-color: #bcc0cc
	}

	.chroma .lnt {
		white-space: pre;
		-webkit-user-select: none;
		user-select: none;
		margin-right: 0.4em;
		padding: 0 0.4em 0 0.4em;
		color: #8c8fa1
	}

	.chroma .ln {
		white-space: pre;
		-webkit-user-select: none;
		user-select: none;
		margin-right: 0.4em;
		padding: 0 0.4em 0 0.4em;
		color: #8c8fa1
	}

	.chroma .line {
		display: flex
	}

	.chroma .k {
		color: #8839ef
	}

	.chroma .kc {
		color: #fe640b
	}

	.chroma .kd {
		color: #d20f39
	}

	.chroma .kn {
		color: #179299
	}

	.chroma .kp {
		color: #8839ef
	}

	.chroma .kr {
		color: #8839ef
	}

	.chroma .kt {
		color: #d20f39
	}

	.chroma .na {
		color: #1e66f5
	}

	.chroma .nc {
		color: #df8e1d
	}

	.chroma .no {
		color: #df8e1d
	}

	.chroma .nd {
		color: #1e66f5;
		font-weight: bold
	}

	.chroma .ni {
		color: #179299
	}

	.chroma .ne {
		color: #fe640b
	}

	.chroma .nl {
		color: #04a5e5
	}

	.chroma .nn {
		color: #fe640b
	}

	.chroma .py {
		color: #fe640b
	}

	.chroma .nt {
		color: #8839ef
	}

	.chroma .nb {
		color: #04a5e5
	}

	.chroma .bp {
		color: #04a5e5
	}

	.chroma .nv {
		color: #dc8a78
	}

	.chroma .vc {
		color: #dc8a78
	}

	.chroma .vg {
		color: #dc8a78
	}

	.chroma .vi {
		color: #dc8a78
	}

	.chroma .vm {
		color: #dc8a78
	}

	.chroma .nf {
		color: #1e66f5
	}

	.chroma .fm {
		color: #1e66f5
	}

	.chroma .s {
		color: #40a02b
	}

	.chroma .sa {
		color: #d20f39
	}

	.chroma .sb {
		color: #40a02b
	}

	.chroma .sc {
		color: #40a02b
	}

	.chroma .dl {
		color: #1e66f5
	}

	.chroma .sd {
		color: #9ca0b0
	}

	.chroma .s2 {
		color: #40a02b
	}

	.chroma .se {
		color: #1e66f5
	}

	.chroma .sh {
		color: #9ca0b0
	}

	.chroma .si {
		color: #40a02b
	}

	.chroma .sx {
		color: #40a02b
	}

	.chroma .sr {
		color: #179299
	}

	.chroma .s1 {
		color: #40a02b
	}

	.chroma .ss {
		color: #40a02b
	}

	.chroma .m {
		color: #fe640b
	}

	.chroma .mb {
		color: #fe640b
	}

	.chroma .mf {
		color: #fe640b
	}

	.chroma .mh {
		color: #fe640b
	}

	.chroma .mi {
		color: #fe640b
	}

	.chroma .il {
		color: #fe640b
	}

	.chroma .mo {
		color: #fe640b
	}

	.chroma .o {
		color: #04a5e5;
		font-weight: bold
	}

	.chroma .ow {
		color: #04a5e5;
		font-weight: bold
	}

	.chroma .c {
		color: #9ca0b0;
		font-style: italic
	}

	.chroma .ch {
		color: #acb0be;
		font-style: italic
	}

	.chroma .cm {
		color: #9ca0b0;
		font-style: italic
	}

	.chroma .c1 {
		color: #9ca0b0;
		font-style: italic
	}

	.chroma .cs {
		color: #9ca0b0;
		font-style: italic
	}

	.chroma .cp {
		color: #9ca0b0;
		font-style: italic
	}

	.chroma .cpf {
		color: #9ca0b0;
		font-weight: bold;
		font-style: italic
	}

	.chroma .gd {
		color: #d20f39;
		background-color: #ccd0da
	}

	.chroma .ge {
		font-style: italic
	}

	.chroma .gr {
		color: #d20f39
	}

	.chroma .gh {
		color: #fe640b;
		font-weight: bold
	}

	.chroma .gi {
		color: #40a02b;
		background-color: #ccd0da
	}

	.chroma .gs {
		font-weight: bold
	}

	.chroma .gu {
		color: #fe640b;
		font-weight: bold
	}

	.chroma .gt {
		color: #d20f39
	}

	.chroma .gl {
		text-decoration: underline
	}
}

/* --- Syntax Highlighting: The Chroma Palette (Dark) --- */

@media (prefers-color-scheme: dark) {
	.bg {
		color: #cad3f5;
		background-color: #24273a
	}

	pre {
		color: #cad3f5;
		background-color: #24273a
	}

	.chroma .err {
		color: #ed8796
	}

	.chroma .lnlinks {
		outline: none;
		text-decoration: none;
		color: inherit
	}

	.chroma .lntd {
		vertical-align: top;
		padding: 0;
		margin: 0;
		border: 0
	}

	.chroma .lntable {
		border-spacing: 0;
		padding: 0;
		margin: 0;
		border: 0
	}

	.chroma .hl {
		background-color: #494d64
	}

	.chroma .lnt {
		white-space: pre;
		-webkit-user-select: none;
		user-select: none;
		margin-right: 0.4em;
		padding: 0 0.4em 0 0.4em;
		color: #8087a2
	}

	.chroma .ln {
		white-space: pre;
		-webkit-user-select: none;
		user-select: none;
		margin-right: 0.4em;
		padding: 0 0.4em 0 0.4em;
		color: #8087a2
	}

	.chroma .line {
		display: flex
	}

	.chroma .k {
		color: #c6a0f6
	}

	.chroma .kc {
		color: #f5a97f
	}

	.chroma .kd {
		color: #ed8796
	}

	.chroma .kn {
		color: #8bd5ca
	}

	.chroma .kp {
		color: #c6a0f6
	}

	.chroma .kr {
		color: #c6a0f6
	}

	.chroma .kt {
		color: #ed8796
	}

	.chroma .na {
		color: #8aadf4
	}

	.chroma .nc {
		color: #eed49f
	}

	.chroma .no {
		color: #eed49f
	}

	.chroma .nd {
		color: #8aadf4;
		font-weight: bold
	}

	.chroma .ni {
		color: #8bd5ca
	}

	.chroma .ne {
		color: #f5a97f
	}

	.chroma .nl {
		color: #91d7e3
	}

	.chroma .nn {
		color: #f5a97f
	}

	.chroma .py {
		color: #f5a97f
	}

	.chroma .nt {
		color: #c6a0f6
	}

	.chroma .nb {
		color: #91d7e3
	}

	.chroma .bp {
		color: #91d7e3
	}

	.chroma .nv {
		color: #f4dbd6
	}

	.chroma .vc {
		color: #f4dbd6
	}

	.chroma .vg {
		color: #f4dbd6
	}

	.chroma .vi {
		color: #f4dbd6
	}

	.chroma .vm {
		color: #f4dbd6
	}

	.chroma .nf {
		color: #8aadf4
	}

	.chroma .fm {
		color: #8aadf4
	}

	.chroma .s {
		color: #a6da95
	}

	.chroma .sa {
		color: #ed8796
	}

	.chroma .sb {
		color: #a6da95
	}

	.chroma .sc {
		color: #a6da95
	}

	.chroma .dl {
		color: #8aadf4
	}

	.chroma .sd {
		color: #6e738d
	}

	.chroma .s2 {
		color: #a6da95
	}

	.chroma .se {
		color: #8aadf4
	}

	.chroma .sh {
		color: #6e738d
	}

	.chroma .si {
		color: #a6da95
	}

	.chroma .sx {
		color: #a6da95
	}

	.chroma .sr {
		color: #8bd5ca
	}

	.chroma .s1 {
		color: #a6da95
	}

	.chroma .ss {
		color: #a6da95
	}

	.chroma .m {
		color: #f5a97f
	}

	.chroma .mb {
		color: #f5a97f
	}

	.chroma .mf {
		color: #f5a97f
	}

	.chroma .mh {
		color: #f5a97f
	}

	.chroma .mi {
		color: #f5a97f
	}

	.chroma .il {
		color: #f5a97f
	}

	.chroma .mo {
		color: #f5a97f
	}

	.chroma .o {
		color: #91d7e3;
		font-weight: bold
	}

	.chroma .ow {
		color: #91d7e3;
		font-weight: bold
	}

	.chroma .c {
		color: #6e738d;
		font-style: italic
	}

	.chroma .ch {
		color: #5b6078;
		font-style: italic
	}

	.chroma .cm {
		color: #6e738d;
		font-style: italic
	}

	.chroma .c1 {
		color: #6e738d;
		font-style: italic
	}

	.chroma .cs {
		color: #6e738d;
		font-style: italic
	}

	.chroma .cp {
		color: #6e738d;
		font-style: italic
	}

	.chroma .cpf {
		color: #6e738d;
		font-weight: bold;
		font-style: italic
	}

	.chroma .gd {
		color: #ed8796;
		background-color: #363a4f
	}

	.chroma .ge {
		font-style: italic
	}

	.chroma .gr {
		color: #ed8796
	}

	.chroma .gh {
		color: #f5a97f;
		font-weight: bold
	}

	.chroma .gi {
		color: #a6da95;
		background-color: #363a4f
	}

	.chroma .gs {
		font-weight: bold
	}

	.chroma .gu {
		color: #f5a97f;
		font-weight: bold
	}

	.chroma .gt {
		color: #ed8796
	}

	.chroma .gl {
		text-decoration: underline
	}
}

/* --- Components: The Reliquary --- */

.meta {
	font-size: .8rem;
	opacity: .8;
	margin-top: 20px;
}

.meta p {
	margin: 8px 0;
}

/* The footer: A signature at the end of the scroll */
#footer {
	text-align: center;
	font-size: 12px;
	margin-top: 2em;
	font-style: italic;
}

/* Marking the way to the outside world */
a[href^="http"]:not([href*="framling.org"])::after {
	content: "⇲";
	font-size: 0.9em;
	opacity: .8;
	margin-left: 0.2em;
	speak: none;
}

#footer .tagline {
	margin: 0;
	opacity: 0.75;
	font-size: 0.85rem;
}

#footer .provenance {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	opacity: 0.7;
	font-style: italic;
	letter-spacing: 0.02em;
}

#footer .provenance a {
	text-decoration: none;
}

#footer .provenance a:hover {
	opacity: 1;
}

#footer .provenance::before {
	content: "- ";
}

#footer .provenance::after {
	content: " -";
}

.fragment-item,
.project-item {
	margin-bottom: 2rem;
}

.fragment-item p,
.project-item p {
	margin: .4rem 0 0;
	opacity: .8;
}

.download-box {
	display: inline-block;
	padding: 1rem;
	margin: 1.5rem 0;
}

.download-box p {
	margin: .3rem 0;
}

.download-meta {
	opacity: .7;
	font-size: .9em;
}

/* --- Atmospheric Elements: The Whispers --- */

.whisper {
	opacity: 0.65;
	font-size: 0.9em;
	font-style: italic;
}

.nowplaying {
	opacity: 0.75;
	font-size: 0.9em;
	font-style: italic;
	margin: 1rem 0;
}

.nowplaying::before {
	speak: none;
}

.nowplaying::first-letter {
	opacity: 0.5;
}

.ambient {
	opacity: 0.7;
	font-size: 0.9em;
	font-style: italic;
	margin: 1rem 0;
}

.backlink {
	display: flex;
	justify-content: space-between;
	align-items: center;
}