html,
body
{
  background: #f9f9fb;
  color: #22252a;
  font-family: 'Helvetica Neue', 'Arial Nova', 'Liberation Sans', Helvetica, Arial, 'Noto Sans', sans-serif;
  font-size: 16px;
  font-size-adjust:0.52;
  font-kerning: normal;
  font-variant-ligatures: contextual common-ligatures;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.001em;
  line-height: 1.5625;
  margin: 0;
  padding: 0;
}

body
{
  padding: 0 0.75em;
}

main,
footer
{
  margin: 1.5em auto;
  max-width: 544px;
}

main h1
{
  font-size: 1.5em;
  line-height: 1.25;
  margin: 1em 0;
}

main h1 a
{
  display: block;
  font-size: 1.75rem;
}

.comment-submission
{
  background-color: #000;
  color: #fff;
}

.comment-form
{
  clear: both;
  display: block;
  margin: 1em auto 2.5em;
}

.comment-form::after
{
  content: '';
  display: block;
}

.comment-input
{
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: fit-content(10%) fit-content(10%) 1fr;
  row-gap: 0.75em;
  justify-content: space-between;  
}

.comment-input .c1
{
  grid-column: 1;
  text-align: right;
}

.comment-input .c2
{
  grid-column: 2;
}

.comment-input .c3
{
  grid-column: 3;
}

.comment-input .rs2
{
  grid-row: 3 / span 2;
}

@media (max-width: 500px)
{
  .comment-input
  {
    grid-template-columns: fit-content(10%) fit-content(90%);
  }

  .comment-input .c3
  {
    grid-column: 1 / span 2;
    padding-bottom: 0.5em;
  }

  .comment-input .rs2
  {
    grid-row: unset;
  }
  
  .comment-input .c3:nth-of-type(1),
  .comment-input .c3:nth-of-type(2)
  {
    border-bottom: 1px solid #000;
  }
}

.comment-input label
{
  user-select: none;
}

.comment-input input[type="text"],
.comment-input input[type="url"],
.comment-input input[type="email"]
{
  height: 1.4em;
  max-width: 180px;
}

.comment-input input[disabled]
{
  background: transparent;
  border-color: #00000040;
  text-decoration: line-through;
}

.comment-input input,
.comment-form textarea,
.comment-submit
{
  border: 1px solid black;
  padding: 0.25em;
}

.comment-form textarea
{
  margin: 0.5em auto;
  width: 100%;
  max-width: calc(100% - 0.5em);
}

@media (max-width: 450px)
{
  .comment-form textarea
  {
    height: 7em;
  }
}

.comment-submit
{
  background: #2491e1;
  border: 1px solid black;
  color: white;
  display: block;
  float: right;
  font-size: 1em;
  font-weight: bold;
  margin-left: auto;
  padding: 0.25em 1em;
}

.comment
{
  contain: content;
  contain-intrinsic-size: 0 170px;
  content-visibility: auto
  display: block;
  margin-bottom: 1em;
}

.comment-header
{
  align-items: center;
  background-color: #f4f4f4;
  border: 1px solid #bbb;
  display: flex;
  justify-content: space-between;
  padding: 8px;
}

.comment-author
{
  align-items: center;
  display: flex;
}

.comment-avatar
{
  border: 1px solid #aaa;
  border-radius: 50%;
  height: 42px;
  margin-right: 1em;
  width: 42px;
}

.comment-name
{
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.comment-date
{
  font-size: 0.8em;
}

.comment-thread
{
  border: 1px solid #bbb;
  border-bottom: 0;
  display: block;
  padding: 0.5px 8px;
}

.comment-header ~ .comment-thread
{
  border-bottom: 1px solid #bbb;
  border-top: 0;
}

.comment-body
{
  border: 1px solid #bbb;
  border-top: 0;
  padding: 0.5px 8px;
}

blockquote
{
  border-left: 2px solid #c3c3c3;
  margin-left: 0;
  padding-left: 0.5em;
}

.icon-email::before,
.icon-feed::before
{
  background-position: centre centre;
  background-repeat: no-repeat;
  bottom: -0.2em;
  content: '';
  display: inline-block;
  height: 1.1em;
  margin-left: 0.2em;
  margin-right: 0.15em;
  position: relative;
  width: 1.1em;
}

.icon-email::before
{
  background-image: url('https://www.ctrl.blog/assets/icon/email.svg');
}

.icon-feed::before
{
  background-image: url('https://www.ctrl.blog/assets/icon/feed.svg');
}

@media (min-width: 560px)
{
  .follow-discourse,
  .external-discourse
  {
    position: relative;
  }

  .external-discourse span
  {
    display: block;
  }

  .follow-discourse::before
  {
    content: '☛';
    display: inline-block;
    font-size: 1.5em;
    line-height: 1;
    left: -1.1em;
    margin-right: 0.1em;
    position: absolute;
    text-align: right;
    width: 1em;
  }

  .external-discourse::before
  {
    content: '+';
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    left: -1.2em;
    margin-right: 0.2em;
    position: absolute;
    text-align: right;
    top: 0.2em;
    width: 1em;
  }
}