/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

h2 {
	--stack-gap: 1.5em;
}

h3 {
	--stack-gap: 1em;
}

h4 {
	--stack-gap: 0.75em;
}

ins {
	text-decoration-style: dotted;
}

ol:where([role="list"]),
ul:where([role="list"]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

html {
	background-color: #ff0078;
}

body {
	font-family: "helvetica neue", helvetica, verdana, sans-serif;
	font-size: 100%;
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	margin: 0;
	background-color: #c4cec9;
}

pre {
	overflow: auto;
	max-width: 100%;
	padding: 1em;
	tab-size: 2ch;
	color: #077;
	border-radius: 0.3rem;
  background:
    /* Shadow Cover left */
    linear-gradient(
    	to right,
      rgba(238, 238, 238, 1) 30%,
      rgba(238, 238, 238, 0)
    ) center left,
    
    /* Shadow Cover right */
    linear-gradient(
    to right,
      rgba(238, 238, 238, 0), 
      rgba(238, 238, 238, 1) 70%
    ) center right,
    
    /* Shadow left */
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0)
    ) center left,
    
    /* Shadow right */
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0)
    ) center right;
  
	background-color: #eee;
  background-repeat: no-repeat;
  background-size: 2rem 100%, 2rem 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}


blockquote {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	border-left: solid medium currentColor;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
/*   display: block; */
  height: auto;
}

h1 {
	font-size: 2.5rem;
	line-height: 1.1;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.2;
}

body > * {
	margin-top: 2rem;
}

body > header {
	margin-top: 0;
}

main {
/* 	padding-top: 1rem; */
	margin-top: 1rem;
	padding-bottom: 2rem;
}

ul[role="list"] {
	padding-left: 0;
}

ul[role="list"] li::marker {
	content: '\200B';
}

:where(ul:not([role="list"]), ol:not([role="list"])) {
	padding-left: 1em;
}

:where(ul:not([role="list"]),ol:not([role="list"])) > * + li {
	margin-top: var(--stack-gap);
}

:where(ol:not([role="list"]) > li) > * + p,
:where(ul:not([role="list"]) > li) > * + p {
	margin-top: var(--stack-gap);
}

:root {
	--a-color-visited: #352287;
	--a-bgcolor-focus: white;
	--layout-column-left: 2rem;
	--layout-column-main: auto;
	--layout-column-right: 0;
	--layout-column-right-gutter: 2rem;
}

a {
	color: var(--a-color, initial);
	outline-offset: 0.2ch;
}

a:focus-visible {
	background-color: var(--a-bgcolor-focus, white);
	box-shadow: 0 0 0 0.2ch var(--a-bgcolor-focus, white);
}

:visited {
	color: var(--a-color-visited, inherit)
}

/* above 464px */
@media (min-width: 29em) {
	:root {
		--layout-column-left: auto;
		--layout-column-main: 25rem;
	}
}

/* Above 600px */
@media (min-width: 37em) {
	:root {
		--layout-column-left: 10rem;
		--layout-column-main: initial;
		--layout-column-main-max: 40em;
		--layout-column-right: auto;
	}
	
	.site-header {
		--layout-column-main: calc(100% - 12rem);
	}
}




.site-header {
	display: grid;
	
	grid-template-columns: 
		var(--layout-column-left)
		var(--layout-column-main)
		var(--layout-column-right-gutter)
		;
	grid-template-rows: min-content minmax(9.375rem, auto) auto;
}

.site-header::before {
	content: "";
	grid-row-start: 1;
	grid-column-start: 1;
	grid-column-end: -1;
	background-image: linear-gradient(to right, #445, #707778);
}


.nav-main {
	grid-row-start: 2;
	grid-column-start: 2;
	margin-left: auto;
}

.nav-main ul {
	margin: 0;
	margin-top: 2rem;
	padding: 0;
	text-align: right;
}

.nav-main li::marker {
	color: transparent;
}

.logo {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 3;
	margin-right: auto;
}

.logo__link {
	display: block;
	border-bottom-right-radius: 100%;
}

.logo svg {
	display: block;
	overflow: visible;
	width: 9.375rem;
	height: 9.375rem;
}

symbol {
	overflow: visible;
}




.circles circle {
	stroke-dashoffset: var(--dashoffset, var(--dashoffset-alt, 0));
}

[data-lng*="!"] {
	--dashoffset: initial !important;
}

/* solid */
[data-lng*="0"] {
	stroke-dasharray: 0;
	--dashoffset: 0;
	--dashoffset-alt: 0;
}

/* 15 */
[data-lng*="1"] {
	stroke-dasharray: 15 1;
	--dashoffset: 8.5;
	--dashoffset-alt: -0.5;
}

/* 7 */
[data-lng*="2"] {
	stroke-dasharray: 7 1;
	--dashoffset: 3.5;
	--dashoffset-alt: -0.5;
}
[data-lng*="3"] {
	stroke-dasharray: 14 2;
	--dashoffset: 7;
	--dashoffset-alt: -1;
}
[data-lng*="4"] {
	stroke-dasharray: 56 8;
	--dashoffset: 28;
	--dashoffse-alt: -4;

}

/* 4 */
[data-lng*="5"] {
	stroke-dasharray: 4 2 2;
	--dashoffset: 2;
	--dashoffset-alt: -6;
}
[data-lng*="6"] {
	stroke-dasharray: 5 1 1 1;
	--dashoffset: 2.5;
	--dashoffset-alt: -1.5;
}

/* 3 */
[data-lng*="7"] {
	stroke-dasharray: 3 1;
	--dashoffset: 1.5;
	--dashoffset-alt: -0.5;
}
[data-lng*="8"] {
	stroke-dasharray: 6 2;
	--dashoffset: 3;
	--dashoffset-alt: -1;
}
[data-lng*="9"] {
	stroke-dasharray: 12 4;
	--dashoffset: 6;
	--dashoffset-alt: -2;
}
[data-lng*="a"] {
	stroke-dasharray: 48 16;
	--dashoffset: 24;
	--dashoffset-alt: -8;

}

/* 1.6 */
[data-lng*="b"] {
	stroke-dasharray: 5 3;
	--dashoffset: 2.5;
	--dashoffset-alt: -1.5;
}
[data-lng*="c"] {
	stroke-dasharray: 10 6;
	--dashoffset: 5;
	--dashoffset-alt: -3;
}
[data-lng*="d"] {
	stroke-dasharray: 40 24;
	--dashoffset: 20;
	--dashoffset-alt: -12;
}

/* 1 */
[data-lng*="e"] {
	stroke-dasharray: 1;
	--dashoffset: 0;
	--dashoffset-alt: 0;
}
[data-lng*="f"] {
	stroke-dasharray: 4;
	--dashoffset: 2;
	--dashoffset-alt: -2;
}
[data-lng*="g"] {
	stroke-dasharray: 8;
	--dashoffset: 4;
	--dashoffset-alt: -4;
}
[data-lng*="h"] {
	stroke-dasharray: 16;
	--dashoffset: -8;
	--dashoffset: 8;	
}
[data-lng*="i"] {
	stroke-dasharray: 32;
	--dashoffset: 16;
	--dashoffset-alt: -16;
}
	
/* 0.6 */
[data-lng*="j"] {
	stroke-dasharray: 3 5;
	--dashoffset: 1.5;
	--dashoffset-alt: -2.5;
}
[data-lng*="k"] {
	stroke-dasharray: 24 40;
	--dashoffset: 12;
	--dashoffset-alt: -20;
}

/* 0.33 */
[data-lng*="l"] {
	stroke-dasharray: 1 3;
	--dashoffset: 0.5;
	--dashoffset-alt: -1.5;
}
[data-lng*="m"] {
	stroke-dasharray: 2 6;
	--dashoffset: 1;
	--dashoffset-alt: -3;
}


.circles circle { opacity: var(--opacity, 0); }

/* data-lat="0—9a—f" */
[data-lat*="0"] { --opacity-0: 1; }
[data-lat*="1"] { --opacity-1: 1; }
[data-lat*="2"] { --opacity-2: 1; }
[data-lat*="3"] { --opacity-3: 1; }
[data-lat*="4"] { --opacity-4: 1; }
[data-lat*="5"] { --opacity-5: 1; }
[data-lat*="6"] { --opacity-6: 1; }
[data-lat*="7"] { --opacity-7: 1; }
[data-lat*="8"] { --opacity-8: 1; }
[data-lat*="9"] { --opacity-9: 1; }
[data-lat*="a"] { --opacity-a: 1; }
[data-lat*="b"] { --opacity-b: 1; }
[data-lat*="c"] { --opacity-c: 1; }
[data-lat*="d"] { --opacity-d: 1; }
[data-lat*="e"] { --opacity-e: 1; }
[data-lat*="f"] { --opacity-f: 1; }

.circles circle:nth-child(1) { --opacity: var(--opacity-0); }
.circles circle:nth-child(2) { --opacity: var(--opacity-1); }
.circles circle:nth-child(3) { --opacity: var(--opacity-2); }
.circles circle:nth-child(4) { --opacity: var(--opacity-3); }
.circles circle:nth-child(5) { --opacity: var(--opacity-4); }
.circles circle:nth-child(6) { --opacity: var(--opacity-5); }
.circles circle:nth-child(7) { --opacity: var(--opacity-6); }
.circles circle:nth-child(8) { --opacity: var(--opacity-7); }
.circles circle:nth-child(9) { --opacity: var(--opacity-8); }
.circles circle:nth-child(10) { --opacity: var(--opacity-9); }
.circles circle:nth-child(11) { --opacity: var(--opacity-a); }
.circles circle:nth-child(12) { --opacity: var(--opacity-b); }
.circles circle:nth-child(13) { --opacity: var(--opacity-c); }
.circles circle:nth-child(14) { --opacity: var(--opacity-d); }
.circles circle:nth-child(15) { --opacity: var(--opacity-e); }
.circles circle:nth-child(16) { --opacity: var(--opacity-f); }





.breadcrumb {
	grid-row-start: 3;
	grid-column-start: 2;
	padding-top: 0.4em;

	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
}

.breadcrumb__label {
	flex: none;
	font: inherit;
}

.breadcrumb__label::after {
	content: ":";
}

ol.breadcrumb__item-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
}

.breadcrumb__item {
	padding-inline-start: 0.2em;
}

.breadcrumb__item::before {
	content: "→";
}

.breadcrumb__item:first-child {
	margin-left: 0;
}

.breadcrumb__item:first-child::before {
	content: '\200B';
}

.breadcrumb__item:first-child {
	padding-inline-start: 0;
}

/* .breadcrumb__item--home {} */

/* .breadcrumb__item-link {} */

/* .breadcrumb__item-link--home {} */

/* .breadcrumb__item--current {} */



.post-date {
	display: flex;
	gap: 1ch;
}

.post-date > :first-child {
	order: -1;
}

.post-date > :nth-child(2) {
	border-left: solid thin currentColor;
	padding-left: 1ch;
}

.post-date > * {
	flex-grow: 0;
	flex-basis: max-content;
}

.post-date dt,
.post-date dd {
	display: inline;
}

.post-date date {
	display: inline-block;
}

.page-box {
	display: grid;

	grid-template-columns: 
		var(--layout-column-left)
		var(--layout-column-main, minmax(16rem, var(--layout-column-main-max)))
		var(--layout-column-right)
		var(--layout-column-right-gutter)
		;
}

.page-box--narrow {
	--layout-column-main-max: 24em;
}

.page-box > * {
	grid-column-start: 2;
	min-width: 0;
}

.stack > * + * {
	margin-top: var(--stack-gap, 2rem);
}

:where(.stack) > * {
	display: block;
}

.stack--tight {
	--stack-gap: 0.5rem;
}

.year-nav-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.year-nav-layout > * {
	flex-basis: 4ch;
}



/* home */

.intro {
	grid-column-end: -2;
	grid-column-start: 2;
	grid-row-start: 1;
	padding: 1rem 0;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	min-height: 9.375rem;
	
	color: white;
	--a-color: white;
	--a-color-visited: white;
	--a-bgcolor-focus: black;
}

.intro > * {
	max-width: 30em;
}

.month-list {
	grid-column-end: 4;
}

.month-list h2:not(:first-child) {
	margin-top: 5rem;
}

.month-list h2 {
	border-bottom: solid thin;
	padding-bottom: 0.5em;
}

article {
	max-width: 40em;
	--stack-gap: 0.5em;
}

article .datestamp {
	--stack-gap: 0.25em;
}

.full header + * {
	margin-top: 3rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.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;
}

textarea {
	width: 100%;
	font-family:'Courier New', Courier, monospace;
	background-color: #eee;
	border: solid 0.125rem black;
}

picture img {
	display: block;
}

a[aria-current] {
	font-weight: bold;
}

.article-list {
	grid-column-end: 4;
}

.image-article {
	position: relative;
	display: flex;
	flex-direction: column;
}

.image-article picture {
	order: -1;
	--stack-gap: 0;
}

.image-article h2 {
	margin-top: calc(var(--stack-gap) * 0.25);
}

.image-article a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1;
}

.image-article-compact {
	position: relative;
	display: grid;
	grid-template-columns: 6em 1fr;
	grid-template-rows: auto auto;
	gap: 0 1rem;
}

.image-article-compact picture {
	grid-row-start: 1;
	grid-row-end: -1;
	grid-column-start: 1;
	margin: 0;
}

.image-article-compact a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 6rem;
	aspect-ratio: 1;
}

.article-list--depth-1 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	grid-gap: 3rem;
}

.article-list--depth-2 > * + * {
	margin-top: 3rem;
}

article .article-list {
	margin-top: 3rem;
}

/* .article-list > * {} */


details > * + * {
	padding-left: 1rem;
}


footer {
	padding-bottom: 2rem;
}


.inline-icon {
	width: 1.1ch;
	vertical-align: middle;
	margin-left: 0.4ch;
}

[href^="javascript:"] {
	background-color: #a0efb5;
	padding-inline: 1em;
	padding-block: 0.2ch;
	border-radius: 999px;	
	cursor: grab;
	border: solid thin #077;
}