/* Base Stuff */

:root {
  /* Main colors */
  --text-color: #222;
  --main-text-color: #222;
  --background-color: #fefefe;
  --reverse-color: #fefefe;
  --link-color: #ff6010;
  --lgrey-color: #eee;
  --dgrey-color: #666;
  --selection-color: #d0eac8;
  --border-color: #ccc;

  /* TODOs Colors */
  --todo-color: var(--text-color);
  --todo-status-color: #999;
  --todo-bg-color: var(--lgrey-color);

  --ongoing-color: #0063db;
  --ongoing-status-color: #0063dbaa;
  --ongoing-bg-color: #0063db1f;

  --done-color: #00b346;
  --done-status-color: #00b346aa;
  --done-bg-color: #00b3461f;

  /* Fonts */
  --emoji-font: "GT Maru Emoji BW", emoji;
  --sans-font: "system", -apple-system, BlinkMacSystemFont, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 
  --serif-font: "lorien", Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --rounded-font: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;

  --default-font: var(--sans-font);
  --background-tile: var(--background-color);
}

@font-face {
  font-family: "system";
  src: url("/_/fonts/MDSystem-Regular.woff2") format("woff2"),
       url("/_/fonts/MDSystem-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "system";
  src: url("/_/fonts/MDSystem-Italic.woff2") format("woff2"),
       url("/_/fonts/MDSystem-Italic.woff") format("woff");
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "system";
  src: url("/_/fonts/MDSystem-Bold.woff2") format("woff2"),
       url("/_/fonts/MDSystem-Bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "system";
  src: url("/_/fonts/MDSystem-BoldItalic.woff2") format("woff2"),
       url("/_/fonts/MDSystem-BoldItalic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'GT Maru Emoji BW';
  src: url("/_/fonts/GT-Maru-Emoji-Black-and-White.woff2") format("woff2"),
       url("/_/fonts/GT-Maru-Emoji-Black-and-White.woff") format("woff"),
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'recursive';
  src: url("/_/fonts/recursive.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'recursive';
  src: url("/_/fonts/recursive-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'recursive';
  src: url("/_/fonts/recursive-bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'recursive';
  src: url("/_/fonts/recursive-bold-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'recursive sans casual';
  src: url("/_/fonts/recursive-sans-casual-regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face {
font-family: 'ppfraktur';
src: url('/_/fonts/PragmataProFraktur.woff2') format('woff2');
font-weight: normal;
font-style: 400;
text-rendering: optimizeLegibility;
}


@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Book.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-BookItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lorien';
  src: url('/_/fonts/MDLórienTrial-BlackItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;
  line-height: 1.45;
  box-sizing: border-box;
}

img, picture, video, canvas, svg {
  display: block;
}

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

body {
  color: #222;
  color: var(--text-color);

  font-size: 16px;
  font-family: sans-serif; 
  font-family: var(--default-font);
  font-feature-settings: "ss03";
  font-synthesis: none;

  background-color: #fefefe;
  background-color: var(--background-color);
  background: linear-gradient(transparent, var(--background-color) 400px), var(--background-tile);
}

@media (max-width: 600px) { body { font-size: 14px; } }


main, main a {
  color: #222;
  color: var(--main-text-color);
}

#footer, #footer > * {
  border-top-width: 1pt;
  border-top-style: solid;
  border-top-color: #222;
  border-top-color: var(--text-color);
}

/* Layout Stuff */

header, main, #footer {
  padding-left: 1.5em;
  padding-right: 1.5em;
}
header {
  padding-top: 2.5em;
  padding-bottom: 1.5em;
}
#footer {
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}

main {
  padding-top: 2em;
  padding-bottom: 3em;
}

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

header ul, #footer ul { padding-left: 0; }

main { max-width: 624px; }

#footer > * {  margin-bottom: 1em; }

#name,  #bio, #years, #footer .nav-title, #breadcrumb ul { margin-bottom: 1em; }

h1, h2, main hr { margin-bottom: 1em; }

h1:has(+ .blurb), h2:has(+ time), h3:has(+ time) { margin-bottom: 0; }

h2 + time, h3 + time { margin-bottom: 1em }

h2, h3 { margin-top: 1.5em; }

p,
ul,
dl,
table,
img,
table,
hr {
  margin-top: 1em;
  margin-bottom: 1em;
}


dd:has(+ dt) { margin-bottom: 1em; }

h1,
h2,
h3,
p,
ul,
dt, dd,
aside { max-width: 624px; }

#bio { max-width: 40ch; }


hr.invisible { border: none; }

@media (max-width: 600px) {
  .mobile-hide { display: none; }
}

@media (max-width: 450px) {
  header, main, #footer {
    padding-left: 1em;
    padding-right: 1em;
  }
}


@supports (display: grid) {
  header, #footer, main { display: grid; }

  header, #footer, main {
    grid-template-columns: repeat(6, 1fr);
    row-gap: 1em;
    column-gap: 2em;
  }

  #footer > * {
    border: none;
    margin-bottom: 0;
  }

  hr.invisible {
    margin: 0;
    grid-column: 1 / -1;
  }

  #about { grid-column: span 2; }

  main { max-width: unset; }

  main > *, article > *, main figure > * { grid-column: 1 / span 4; }

  article { display: contents; }

  h2 { margin-bottom: 0; }

  p,
  ul,
  dl,
  table,
  img,
  hr { margin-top: 0; }

  p,
  ul,
  dl,
  table,
  img { margin-bottom: 0; }

  figcaption { margin-top: 1em; }

  .display-contents { display: contents; }

  .two-figures, .three-figures, .four-figures {
    grid-column: 1 / -1;
    display: grid;
    grid-row-gap: 1em;
  }

  .two-figures, .three-figures { grid-template-columns: subgrid; }
  .four-figures { grid-template-columns: repeat(12, 1fr); grid-column-gap: 1.5em; }
  .four-figures .half-width { grid-column: span 6; }

  .four-figures figure, .two-figures figure { grid-column: span 3; }
  .three-figures figure { grid-column: span 2; }

  .right-two { grid-column: span 2; }

  .full-grid { grid-column: 1 / -1; }

  #banner { grid-column: 1 / span 2; }

  @media screen and (min-width: 1000px) {
    main aside {
        border-top: none;
        padding-top: 0;
        grid-column: span 2;
    }
  }

  @media screen and (max-width: 1000px) {
    header, #footer, main {
      column-gap: 1.5em;
    }

    .three-figures figure { grid-column: span 3;  }
    .four-figures { grid-template-columns: subgrid;  }

    main > *, article > *, main figure > *, main aside,
    #about, .right-two, .full-grid, .grid-end { grid-column: 1 / -1; }

    #about {
      padding-bottom: 1em;
      border-bottom: 1pt dashed var(--border-color);
    }

    #footer nav { grid-column-end: span 2; }
  }


  @media screen and (min-width: 1440px) {
     main > *, article > *, main figure > * { grid-column: 2 / span 3; }

    #banner { grid-column: 2 / span 1; }

    #about { grid-column: 2 / span 2; }
    .full-grid  { grid-column: 1 / -1; }

    .article-date {
      grid-column: 1 / span 1;
      align-self: end;
      grid-row-start: span 2;
    }
  }

  @media screen and (max-width: 870px) {
    .two-figures:not(.keep-grouped) figure,
    .three-figures:not(.keep-grouped) figure,
    .four-figures:not(.keep-grouped) figure { grid-column: 1 / -1; }
  }
}
main {
  counter-reset: ref sidenote;
}

header a, #footer a {
  color: #222;
  color: var(--text-color);
}

#my-name, #name, #footer .nav-title {
  font-weight: bold;
}

#you-are-here {
  list-style-type: "→ ";
  color: var(--link-color);
}

#my-name:hover #hi {
  transition: transform 0.5s ease-in-out;
  transform: scale(1.5) rotate(10deg);
  animation-duration: 2s;
  animation-name: scale-spin;
  animation-iteration-count: infinite;
}

@keyframes scale-spin {
  0%, 50%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(10deg);
  }
  75% {
    transform: scale(1.2) rotate(-10deg);
  }
}

#go-to-nav:not(:hover) #dotnav {
  color: var(--link-color);
}

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: var(--selection-color); }
    100% { background-color: initial; }
}

h1 {
  font-size: 3em;
  letter-spacing: -0.01em;
  line-height: 1;
}

.blurb, h2 {
  font-size: 1.4em;
  line-height: 1.2;
  font-weight: normal;
}

h3 { font-size: 1em; }

hr {
  width: 100%;
  border-width: 1pt 0 0;
  border-color: #222;
  border-color: var(--text-color);
  border-style: solid;
}

a {
  text-decoration: none;
  color: #222;
  color: var(--text-color);
}

main p a,
main li a,
main table a,
main figcaption a,
main time a,
main dl a {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-color: rgb(from var(--main-text-color) R G B / 0.6);
}

#footer a:hover, a:hover {
  color: var(--link-color);
  text-decoration-color: var(--link-color);
  animation-name: bounce-line;
}

@keyframes bounce-line {
  0%, 50%, 100% {
    text-underline-offset: 0.1em;
  }
  25%, 75% {
    text-underline-offset: 0.2em;
  }
}

main dl dt{ font-weight: bold; }

code {
  font-size: 1em;
  line-height: 1;
  font-family: 'ppfraktur', monospace;
  font-feature-settings: "ss01";
  font-variant-ligatures: none;
}

p code {
  border: 1pt solid #ccc;
	padding: 0 0.2em;
	display: inline-block;
	border-radius: 2pt;
}

pre {
  border-width: 1pt;
  border-style: dotted;
  border-color: #222;
  border-color: var(--text-color);
  padding: 10px;
  overflow-x: scroll;
}

img { max-width: 100%; }

.button_88x31 { image-rendering: pixelated; }

figure:has(> figcaption) img, figure.bordered img {
  outline-width: 1pt;
  outline-style: solid;
  outline-color: var(--border-color);
  border-radius: 2pt;
}

blockquote {
  padding-left: 1em;
  border-left-width: 1pt;
  border-left-style: dotted;
  border-left-color: #222;
  border-left-color: var(--text-color);
}

blockquote p {
  font-style: italic;
  font-family: "ppfraktur", var(--default-font);
}

blockquote p:has(+ p) {
  margin-bottom: 1em;
}

blockquote footer {
  margin-top: 1em;
}

aside {
  border-top-width: 1pt;
  border-top-style: solid;
  border-top-color: #ccc;
  border-top-color: var(--border-color);
  padding-top: 0.4em;
}

.sidenote, .sidenote a {
  color: #666;
  color: var(--dgrey-color);
}

@supports selector(.ref::after) {
  .ref-number { display: none; }
  .ref::after {
    counter-increment: ref;
    content: counter(ref);
    font-variant-position: super;
    padding: 0 0.2em;
  }
  .sidenote::before {
    counter-increment: sidenote;
    content: counter(sidenote);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "lnum";
    font-family: "ppfraktur", var(--default-font);
    position: absolute;
    margin-left: -1em;
  }

  .sidenote {
    margin-left: 1em;
  }
}

figcaption {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-feature-settings: "case", "ss03";
}

figcaption, figcaption a {
  color: #666;
  color: var(--dgrey-color);
}

ul { padding-left: 1em; }

ul ul { margin: 0; }

li { list-style: circle; }

header ul { display: flex; }

header li, #footer li { list-style: none; }

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

table tr {
  border-width: 1pt;
  border-style: solid;
  border-color: #ccc;
  border-color: var(--border-color);
}

table tbody tr:hover {
  background-color: var(--lgrey-color);
}

table td, table th {
  vertical-align: top;
  padding: 0.3rem 0.4rem;
  text-align: left;
}

.article-list tr { border: none; }
.article-list th {
  border-bottom-width: 1pt;
  border-bottom-style: solid;
  border-bottom-color: #ccc;
  border-bottom-color: var(--border-color);
}
.article-list td,  .article-list th { padding-left: 0; padding-right: 0; }
.article-date {
  color: #666;
  color: var(--dgrey-color);
}

sup { font-variant-position: super; }

.button {
  transition: 0.2s;
  border-width: 1pt;
  border-style: solid;
  border-color: #666;
  border-color: var(--dgrey-color);
  padding: 0.2rem 0.3rem;
  border-radius: 2pt;
  user-select: none;
}

.button, figure:has(> figcaption) img, table, pre, p code {
  background-color: #fefefea6;
  backdrop-filter: blur(10px) saturate(180%);
}

@supports (outline: 1pt) {
  .button {
    border: none;
    outline-width: 1pt;
    outline-style: solid;
    outline-color: var(--dgrey-color);
  }

  p code {
    border: none;
  	outline: 1pt solid var(--border-color);
	}

  pre {
    border: none;
    outline-width: 1pt;
    outline-style: dotted;
    outline-color: var(--text-color);
  }
}

.button a { color: var(--dgrey-color); }

.button + .button {
  margin-left: 1pt;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:has(+ .button) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button:hover, input:checked + .button, .button:hover a {
  color: var(--reverse-color);
}

.button:hover {
  border-color: var(--text-color);
  background-color: var(--done-color);
  z-index: 1;
}

#eof:hover,
#top:hover {
  outline-color: var(--dgrey-color);
  background-color: var(--ongoing-color);
}

.heart, #my-name:not(:hover) #hi { color: var(--done-color); }


fieldset {
  border-width: 1pt;
  border-style: solid;
  border-color: var(--border-color);
  min-height: 2em;
  max-width: fit-content;
  background-color: var(--lgrey-color);
  user-select: none;
  display: grid;
  height: fit-content;
}

label { cursor: pointer; }

input[type="checkbox"] {
  margin-left: 0.6em;
  accent-color: var(--text-color);
}

.field {
  margin: 0.2em 0.2em; 
  color: var(--dgrey-color);
}

.field label {
  margin: 0.3em 0.4em;
}

.field:hover {
  outline-width: 1pt;
  outline-style: solid;
  outline-color: var(--border-color);
  color: var(--text-color);
  border-radius: 2pt;
}

.field:has(input[type="checkbox"]:checked) {
  color: var(--text-color);
}

.field { display: none; }

@supports selector(.field:has(input[type="checkbox"]:checked)) {
  .field { display: unset; }
}

.lgrey {
  background-color: #eee;
  background-color: var(--lgrey-color);
}

.emoji {
  font-family: var(--emoji-font); 
  line-height: 1;
  font-size: 1.2em;
}

.overflow-x { overflow-x: scroll; }

#order-1 { order: -1; }
#order-last { order: 999; }
.text-nowrap { text-wrap: nowrap; }

#years { font-family: "ppfraktur", var(--default-font); }