:root {
  --padding: 1.5rem;
  --tag-color: hsl(247 26% 55%);
}

@font-face {
  font-family: 'mdlorien';
  src: url('/static/fonts/MDLorienTrial-Book.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mdlorien';
  src: url('/static/fonts/MDLorienTrial-BookItalic.otf');
  font-weight: normal;
  font-style: italic;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: -apple-system, sans-serif;
}

body {
  background: #1f1f1f;
  color: #ccc;
  margin: 0;
  padding: 0;
}

a {
  color: hsl(132 7% 37%);
  text-decoration-color: hsl(132, 7%, 15%);
  text-decoration-skip-ink: all;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

a:hover {
  color: #ccc;
}

.container {
  margin: 0px auto;
  max-width: 800px;
  padding: 0 var(--padding);
}


/* Headings */

body>h1.container {
  color: #555;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.1;
  margin-top: 1rem;
}

body>h1 a {
  color: #888;
  font-weight: normal;
  text-decoration: none;
}

body.home-view>h1 {
  color: hsl(113.3, 9.3%, 38%);
}

body.post-view>h1 {
  color: hsl(200 15% 52%);
}

body.post-view>h1 .time {
  font-size: 1rem;
  margin-left: 2pt;
}

body.tag-view>h1 a {
  color: var(--tag-color);
}

body.diary-view>h1 {
  color: hsl(47.7, 33.6%, 54.5%);
}

body.edit-view {
  display: flex;
}


/* Header */

header ul.tags {
  margin-bottom: 1rem;
}

header ul.tags li.tag a {
  color: var(--tag-color);
  text-decoration: none;
}

header ul.tags li.tag a:hover {
  color: #fff;
}



/* Footer */

footer.container {
  border-top: solid 1px #222;
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}

footer.container nav.container {
  margin: 0;
  padding: 0;
}

footer nav.flex {
  margin-bottom: 1rem;
}

footer nav.years {
  line-height: 1.4;
  margin-bottom: 1rem;
}


/* Pagination */

body>.pagination {
  color: #555;
  margin-block-start: 1rem;

  & .separator {
    color: #333;
    margin-inline: 2pt;
  }
}


/* Nav */

nav.container {
  line-height: 1.5;
  margin-bottom: 0.7rem;
  margin-top: 0.5rem;
}

nav.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

nav.flex a {
  color: hsl(111, 11%, 35.7%);
  margin: 0;
}

nav.flex a:hover {
  color: #fff;
}

nav a {
  margin-right: 1.25rem;
  text-decoration: none;
}


/* Posts */

.post {
  padding: var(--padding);
  word-break: break-word;
  word-wrap: break-word;
}

.post+.post {
  border-top: solid 1px #282828;
}

.post header {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "date edit"
    "tags tags";
  margin-bottom: 0.7rem;
  width: 100%;
}

.post header>a {
  grid-area: date;
  flex: 1;
  text-decoration: none;
}

.post header nav {
  grid-area: edit;
  margin-left: 1.25rem;
  text-align: right;
}

.post header nav a {
  color: #444;
}

.post header nav a:hover {
  color: #fff;
}

.post header .date {
  color: hsl(305 17% 40%);
  font-size: 1.1rem;
}

.post header .subtitle {
  color: hsl(305 17% 37%);
  font-size: 0.9rem;
  margin-left: 2pt;
}

.post header a:hover .date,
.post header a:hover .subtitle {
  color: #fff;
}

.post ul.tags {
  grid-area: tags;
  line-height: 1.4;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.post ul.tags .tag a {
  color: var(--tag-color);
  margin-top: 0.5rem;
  min-width: 100%;
  text-decoration: none;
}

.post ul.tags .tag.base a {
  color: hsl(20 15% 47%);
}

.post ul.tags .tag a:hover {
  color: #fff;
}

.post p:first-child {
  margin-top: 0;
}

.post p:last-child {
  margin-bottom: 0;
}

.post .content * {
  font-family: mdlorien;
  font-size: 1.45rem;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.45;
}

.post .content figure {
  margin: 1rem 0;
}

.post .content figure img {
  max-width: 100%;
}

.post .content code {
  color: #d0b88a;
  font-family: monospace;
  font-size: 1.3rem;
}

.post .content pre {
  line-height: 1.1;
}

footer.end {
  padding-bottom: 100px;
}

section.end::after {
  color: #333;
  content: '■';
  display: block;
  padding-bottom: 100px;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .post {
    display: flex;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }

  .post header {
    display: block;
    margin-right: 4rem;
    max-width: 7rem;
    width: 7rem;
  }

  .post header nav {
    margin-left: 0;
    text-align: left;
  }

  .post header nav a {
    margin-right: 1.25rem;
  }

  .post header .subtitle {
    display: block;
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
    margin-left: 0;
  }

  .post header ul.tags {
    margin-top: 1rem;
  }

  .post .content {
    flex: 1;
  }

  .post .content * {
    font-size: 1.5rem;
    line-height: 1.45;
  }
}

.post .content a {
  color: #eee;
  text-decoration-color: #888;
}

.post .content .highlight {
  color: hsl(340.5, 100%, 68%);
}

.post blockquote {
  border-left: solid 5px #333;
  margin-left: 0;
  padding-left: 1rem;
}

/* /kind-words */

.post .content h3:first-child {
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
}

.post .content h3:first-child+h4 {
  color: #777;
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
  line-height: 1.2;
  margin: 0;
  margin-top: 2pt;
}


/* Tags */

.tags {
  margin: 0;
  padding: 0;
}

.tags .tag {
  display: inline-block;
  margin-right: 10px;
}


/* Search */

#search {
  display: flex;
  margin-top: 2rem;
}

#search input[name=q] {
  background: #111;
  border: none;
  border-radius: 5px 0 0 5px;
  color: #ccc;
  font-size: 1.3rem;
  max-width: 13rem;
  padding: 0.4rem 0.6rem 0.5rem;
}

#search input[name=q]:focus {
  outline: none;
}

#search input[type=submit] {
  background: hsl(280.6, 23.6%, 28.2%);
  border: none;
  border-radius: 0 5px 5px 0;
  color: #fff;
  font-size: 1.1rem;
  padding: 0.4rem 1rem 0.5rem;
  -webkit-appearance: none;
}

#search+.container .tags {
  line-height: 1.4;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

#search+.container .tags li.tag a {
  color: var(--tag-color);
  text-decoration: none;
}

#search+.container .tags li.tag a:hover {
  color: #fff;
}


/* Edit */

form#edit {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100dvh;
}

form#edit textarea {
  -webkit-appearance: none;
  background: none;
  border: none;
  color: #ccc;
  font-family: mdlorien;
  font-size: 1.4rem;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.5;
  padding: var(--padding);
  resize: none;
}

@media screen and (min-width: 600px) {
  form#edit textarea {
    font-size: 1.5rem;
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

@media screen and (min-width: 1000px) {
  form#edit textarea {
    font-size: 1.5rem;
    padding-inline: 23rem;
  }

  form#edit textarea[name=command] {
    padding-block: 0.5rem;
  }
}

@media screen and (min-width: 1800px) {
  form#edit textarea {
    font-size: 1.5rem;
    padding-inline: 38rem;
  }

  form#edit textarea[name=command] {
    padding-block: 0.5rem;
  }
}

form#edit textarea:focus {
  outline: none;
}

form#edit textarea[name=text] {
  flex: 1;
}

form#edit textarea[name=command] {
  background: #111;
  border-radius: 0;
  color: hsl(286 15% 45%);
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding-bottom: 0.8rem;
  padding-top: 0.8rem;
}

form#edit input[type=submit] {
  background: #282828;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: normal;
  padding: 1rem 1.7rem 1.15rem;
  right: 1.5rem;
  -webkit-appearance: none;
  width: 100%;
}

form#edit input[type=submit]:hover {
  background: hsl(284, 16.5%, 27.8%);
}

form#edit[data-back-uri] input[type=submit] {
  padding: 0.6rem 1.7rem 0.75rem;
}


/* Login */

.login {
  margin: 18rem auto 0;
  max-width: 350px;
}

.login label {
  color: #333;
  display: block;
  margin-bottom: 0.5rem;
}

.login input[type=text],
.login input[type=password] {
  background: #000;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.4rem;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.login input[type=text]:focus,
.login input[type=password]:focus {
  outline: none;
}

.login input[type=submit] {
  background: hsl(288.9, 20.3%, 26.1%);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 1rem 1rem 1.2rem;
  text-align: center;
  -webkit-appearance: none;
  margin-top: 1.5rem;
  width: 100%;
}

.login input[type=submit]:hover {
  background: #444;
}


/* Journal coverage */

ul.coverage-header {
  margin-block: 1rem;
  list-style: none;

  & * {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  & li {
    color: hsl(220 14% 49%);
  }

  & li+li {
    margin-block-start: 0.25rem;
  }
}

.coverage {
  margin-block-start: 1rem;

  & * {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .year {
    align-items: baseline;
    display: flex;
    gap: 5px;

    &+.year {
      margin-block-start: 15px;
    }

    h2 {
      color: hsl(88 14% 49%);
      font-weight: 500;
      margin: 0;
      min-width: 40px;
    }

    .month {
      align-items: baseline;
      display: flex;

      &+.month {
        margin-block-start: 5px;
      }

      h3 {
        color: hsl(88 14% 49%);
        display: inline-block;
        font-weight: 500;
        margin: 0;
        min-width: 40px;
      }

      .days {
        display: inline;

        .day {
          color: hsl(0 48% 51%);
          font-variant-numeric: tabular-nums;
          font-weight: 500;
          margin-inline-end: 3px;
          text-decoration: none;

          &.has-entry {
            color: hsl(88 24% 56%);
          }
        }
      }
    }
  }
}

section.unfinished {
  margin-block: 3rem;

  & ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    & a {
      border-radius: 3px;
      color: white;
      display: inline-flex;
      font-size: 1.1rem;
      text-decoration: none;

      & .count {
        background: hsl(348 37% 39%);
        border-radius: 3px 0 0 3px;
        padding: 0.5rem 0.8rem;
        text-align: center;
        width: 3rem;
      }

      & .date {
        background: hsl(348 47% 49%);
        border-radius: 0 3px 3px 0;
        padding: 0.5rem 1rem;
        width: 200px;
      }

      &:hover {
        background: #444;
      }
    }
  }
}