body {
  background: var(--g0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.forum-header {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding-inline: clamp(var(--s4), 4vw, var(--s6));
  border-bottom: 1px solid var(--g2);
}

.forum-header nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-inline: auto;
}

.forum-header nav a,
.forum-account {
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  color: var(--g4);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

.forum-header nav a:hover,
.forum-header nav a:focus-visible,
.forum-account:hover,
.forum-account:focus-visible,
.forum-header nav a[aria-current="page"] {
  border-color: var(--g5);
  color: var(--g5);
}

.forum-header nav a:active,
.forum-account:active {
  color: var(--g3);
}

.forum-account {
  margin-left: 0;
  color: var(--g5);
}

.forum-shell {
  width: min(90rem, calc(100% - 8rem));
  margin-inline: auto;
  padding-bottom: var(--s7);
}

.forum-intro {
  min-height: 25rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s7) var(--s6);
}

.forum-intro h1 {
  margin: 0;
  font-size: clamp(var(--t-3xl), 8vw, 8rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .9;
}

.forum-intro p {
  max-width: 53ch;
  margin: var(--s4) 0 0;
  color: var(--g4);
  font-size: var(--t-md);
  line-height: 1.42;
  text-wrap: pretty;
}

.forum-primary {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--g5);
  background: var(--g5);
  color: var(--g0);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.forum-primary:hover {
  background: var(--g4);
  border-color: var(--g4);
}

.forum-primary:active {
  background: var(--g3);
  border-color: var(--g3);
}

.forum-compose {
  margin-bottom: var(--s6);
  padding: var(--s5) 0;
  border-top: 1px solid var(--g4);
  border-bottom: 1px solid var(--g2);
}

.forum-compose-head,
.forum-form-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.forum-compose h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-xl);
  font-weight: 600;
}

.forum-compose form {
  width: min(48rem, 100%);
  display: grid;
  gap: var(--s3);
}

.forum-compose label,
.forum-reply-form label {
  display: grid;
  gap: var(--s2);
  color: var(--g4);
  font-size: var(--t-xs);
  font-weight: 600;
}

.forum-compose input,
.forum-compose select,
.forum-compose textarea,
.forum-reply-form textarea,
.forum-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--g2);
  border-radius: 0;
  background: var(--g1);
  color: var(--g5);
}

.forum-compose input,
.forum-compose select,
.forum-search input {
  height: 3rem;
  padding: 0 var(--s3);
}

.forum-compose textarea,
.forum-reply-form textarea {
  min-height: 11rem;
  padding: var(--s3);
  resize: vertical;
}

.forum-compose input:hover,
.forum-compose select:hover,
.forum-compose textarea:hover,
.forum-reply-form textarea:hover,
.forum-search input:hover {
  border-color: var(--g3);
}

.forum-compose :is(input, select, textarea):focus,
.forum-reply-form textarea:focus,
.forum-search input:focus {
  border-color: var(--g5);
}

.forum-compose ::placeholder,
.forum-reply-form ::placeholder,
.forum-search ::placeholder {
  color: var(--g3);
}

.forum-feedback {
  min-height: 1.5em;
  margin: 0;
  color: var(--g4);
  font-size: var(--t-sm);
}

.forum-feedback.error {
  color: var(--g5);
}

.forum-feedback:empty {
  display: none;
}

.forum-text-button {
  padding: var(--s1) 0;
  border: 0;
  border-bottom: 1px solid var(--g3);
  background: none;
  color: var(--g4);
  font-size: var(--t-xs);
}

.forum-text-button:hover {
  border-color: var(--g5);
  color: var(--g5);
}

.forum-text-button:active {
  color: var(--g3);
}

.forum-browser {
  border-top: 1px solid var(--g4);
}

.forum-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  border-bottom: 1px solid var(--g2);
}

.forum-categories a {
  display: inline-block;
  padding: var(--s3) 0;
  border-bottom: 2px solid transparent;
  color: var(--g3);
  font-size: var(--t-sm);
  font-weight: 600;
}

.forum-categories a:hover,
.forum-categories a:focus-visible,
.forum-categories a[aria-current="page"] {
  border-color: var(--g5);
  color: var(--g5);
}

.forum-search {
  max-width: 29rem;
  display: flex;
  gap: var(--s2);
  margin: var(--s5) 0;
}

.forum-search button {
  padding: 0 var(--s3);
  border: 1px solid var(--g3);
  background: transparent;
  color: var(--g5);
  font-size: var(--t-xs);
  font-weight: 600;
}

.forum-search button:hover {
  border-color: var(--g5);
  background: var(--g2);
}

.forum-search button:active {
  background: var(--g3);
}

.forum-list-head,
.forum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: var(--s4);
}

.forum-list-head {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--g4);
  color: var(--g3);
  font-size: var(--t-xs);
}

.forum-list-head span:last-child {
  text-align: right;
}

.forum-row {
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--g2);
}

.forum-row h2 {
  max-width: 52ch;
  margin: 0;
  font-size: var(--t-md);
  font-weight: 570;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.forum-row h2 a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.forum-row h2 a:active {
  color: var(--g3);
}

.forum-row p {
  max-width: 70ch;
  margin: var(--s1) 0 0;
  color: var(--g4);
  font-size: var(--t-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.forum-row-meta,
.forum-topic-meta,
.forum-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  color: var(--g3);
  font-size: var(--t-xs);
}

.forum-row-meta .forum-pinned,
.forum-row-meta .forum-locked {
  color: var(--g5);
}

.forum-row-author {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--g4);
}

.forum-row-author:hover,
.forum-row-author:focus-visible,
.forum-profile-link:hover,
.forum-profile-link:focus-visible {
  color: var(--g5);
  text-decoration: underline;
}

.forum-row-author img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
  filter: grayscale(1);
}

.forum-row-role {
  color: var(--g3);
}

.forum-row-count {
  align-self: start;
  padding-top: var(--s1);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.forum-empty,
.forum-loading,
.forum-error {
  max-width: 52ch;
  margin: 0;
  padding: var(--s6) 0;
  color: var(--g4);
  font-size: var(--t-md);
}

.forum-error {
  color: var(--g5);
}

.forum-pages {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
}

.forum-pages a,
.forum-back {
  display: inline-block;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--g3);
  color: var(--g4);
  font-size: var(--t-sm);
}

.forum-pages a:hover,
.forum-back:hover {
  border-color: var(--g5);
  color: var(--g5);
}

.forum-pages a:active,
.forum-back:active {
  color: var(--g3);
}

.forum-back {
  margin-top: var(--s5);
}

.forum-topic {
  padding: var(--s6) 0 var(--s5);
  border-bottom: 1px solid var(--g4);
}

.forum-topic h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(var(--t-2xl), 5vw, var(--t-4xl));
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.04;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.forum-topic-meta {
  margin-top: var(--s4);
}

.forum-post {
  margin-top: var(--s2);
  border: 1px solid var(--g2);
  background: var(--g1);
}

.forum-post-head {
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--g2);
  background: var(--g2);
  color: var(--g4);
  font-size: var(--t-xs);
}

.forum-post-inner {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s4);
  min-height: 14rem;
  padding: var(--s4);
}

.forum-post-meta {
  display: grid;
  align-content: start;
  gap: var(--s1);
  margin: 0;
  padding-right: var(--s3);
  border-right: 1px solid var(--g2);
}

.forum-post-meta strong {
  color: var(--g5);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.forum-author-role {
  color: var(--g4);
}

.forum-author-avatar {
  width: 8rem;
  height: 8rem;
  margin-top: var(--s2);
  object-fit: cover;
  filter: grayscale(1);
}

.forum-post-content {
  max-width: 72ch;
  margin: 0;
  color: var(--g5);
  font-size: var(--t-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.forum-replies-head {
  margin: var(--s6) 0 0;
  font-size: var(--t-xl);
  font-weight: 600;
}

#topic-detail > .forum-empty {
  padding-block: var(--s4);
}

.forum-reply-form {
  width: min(54rem, 100%);
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
}

.forum-reply-form .forum-form-end {
  align-items: start;
}

.forum-reply-note {
  margin: var(--s5) 0;
  color: var(--g4);
  font-size: var(--t-sm);
}

.forum-reply-note a {
  border-bottom: 1px solid var(--g4);
  color: var(--g5);
}

.forum-moderation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (max-width: 800px) {
  .forum-header {
    gap: var(--s4);
    padding-inline: var(--s4);
  }

  .forum-shell {
    width: calc(100% - 3rem);
  }

  .forum-intro {
    min-height: 20rem;
    padding-block: var(--s6) var(--s5);
  }

  .forum-intro p {
    font-size: var(--t-sm);
  }
}

@media (max-width: 560px) {
  .forum-header {
    min-height: 4.25rem;
    gap: var(--s3);
    padding-inline: var(--s3);
  }

  .forum-header .brand {
    font-size: var(--t-sm);
  }

  .forum-header nav {
    gap: var(--s3);
  }

  .forum-header nav a:first-child,
  .forum-header nav a:last-child {
    display: none;
  }

  .forum-shell {
    width: calc(100% - 2rem);
  }

  .forum-intro {
    min-height: 0;
    display: block;
    padding-block: var(--s6) var(--s5);
  }

  .forum-intro h1 {
    font-size: clamp(var(--t-3xl), 17vw, 5rem);
  }

  .forum-intro p {
    max-width: 39ch;
  }

  .forum-intro .forum-primary {
    width: 100%;
    margin-top: var(--s5);
  }

  .forum-categories {
    gap: var(--s4);
  }

  .forum-categories a {
    font-size: var(--t-xs);
  }

  .forum-row,
  .forum-list-head {
    grid-template-columns: minmax(0, 1fr) 3rem;
    gap: var(--s2);
  }

  .forum-row h2 {
    font-size: var(--t-md);
  }

  .forum-row-count {
    font-size: var(--t-sm);
  }

  .forum-post-inner {
    display: block;
    min-height: 0;
  }

  .forum-post-meta {
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--s3);
    margin-bottom: var(--s4);
    padding-right: 0;
    border-right: 0;
  }

  .forum-post-meta strong,
  .forum-author-role {
    grid-column: 2;
  }

  .forum-author-avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 3rem;
    height: 3rem;
    margin: 0;
  }

  .forum-form-end {
    align-items: stretch;
    flex-direction: column;
  }

  .forum-form-end .forum-primary {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .forum-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s3);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}