.fr-wntop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.fr-wntabs {
  display: flex;
  gap: .125rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.fr-wntabs::-webkit-scrollbar {
  display: none;
}

.fr-wntab {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  flex-shrink: 0;
  padding: .4375rem .6875rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-wntab:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-wntab:active {
  transform: scale(.96);
}

.fr-wntab b {
  padding: .0625rem .3125rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--stone-400);
  background: var(--ivory);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px var(--stone-200);
}

.fr-wntab.is-active {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 8%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 14%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff), 0 0 0 1px rgb(var(--gold-rgb) / .35);
}

.fr-wntab.is-active b {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, var(--white));
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .3);
}

.fr-wnspacer {
  flex: 1 1 auto;
}

.fr-pchips {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.fr-pchip {
  padding: .3125rem .5625rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
  transition: color var(--transition-fast), box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-pchip:hover {
  color: var(--stone-900);
  box-shadow: inset 0 0 0 1px var(--stone-400);
}

.fr-pchip.is-active {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

.fr-wnlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.25rem;
  align-items: start;
}

.fr-fitem {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
  transition: background var(--transition-fast);
}

.fr-fitem:last-of-type {
  border-bottom: none;
}

.fr-fitem:hover {
  background: rgb(var(--gold-rgb) / .04);
}

.fr-fitem.is-unread:before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 25%, transparent));
}

.fr-fitem__ava {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-600);
  background: linear-gradient(135deg, var(--stone-200), var(--stone-300));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--stone-200);
}

.fr-fitem__ava--gold {
  color: #241c0c;
  background: linear-gradient(135deg, #8b6914 0%, #e8c96a 100%);
}

.fr-fitem__dot {
  position: absolute;
  top: -.125rem;
  right: -.125rem;
  width: .5rem;
  height: .5rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 8px rgb(var(--gold-rgb) / .6);
}

.fr-fitem__body {
  min-width: 0;
}

.fr-fitem__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3125rem;
}

.fr-fitem__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--stone-700);
}

.fr-fitem.is-unread .fr-fitem__title {
  font-weight: 700;
  color: var(--stone-900);
}

.fr-fitem__title a {
  transition: color var(--transition-fast);
}

.fr-fitem__title a:hover {
  color: var(--gold);
}

.fr-fitem__snippet {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .3125rem;
  font-size: .78125rem;
  line-height: 1.5;
  color: var(--stone-400);
}

.fr-fitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1875rem .5rem;
  margin-top: .375rem;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-fitem__meta a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--stone-500);
  transition: color var(--transition-fast);
}

.fr-fitem__meta a:hover {
  color: var(--gold);
}

.fr-fitem__meta time,
.fr-fitem__meta em {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-style: normal;
}

.fr-fitem__meta > * + *:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .6875rem;
  margin-right: .4375rem;
  background: var(--stone-200);
  vertical-align: -.125rem;
}

.fr-fitem__side {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.fr-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  color: var(--stone-400);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-fitem:hover .fr-quick,
.fr-quick:focus-visible {
  opacity: 1;
}

.fr-quick:hover {
  color: var(--gold);
  background: var(--gold-bg);
}

.fr-quick:active {
  transform: scale(.9);
}

.fr-quick svg {
  width: .9375rem;
  height: .9375rem;
}

.fr-quick.is-on {
  color: var(--gold);
  opacity: 1;
}

.fr-fitem__num {
  min-width: 2.75rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-500);
}

.fr-fitem__num span {
  display: block;
  margin-top: .125rem;
  font-family: var(--font-heading);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}

.fr-fitem.is-unread .fr-fitem__num {
  color: var(--gold);
}

.fr-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
  transition: background var(--transition-fast);
}

.fr-sub:last-child {
  border-bottom: none;
}

.fr-sub:hover {
  background: rgb(var(--gold-rgb) / .04);
}

.fr-sub__title {
  display: block;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: .78125rem;
  font-weight: 600;
  color: var(--stone-700);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.fr-sub__title:hover {
  color: var(--gold);
}

.fr-sub__meta {
  margin-top: .1875rem;
  font-size: .625rem;
  font-family: var(--font-mono);
  color: var(--stone-400);
}

.fr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .375rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  color: #241c0c;
  background: linear-gradient(180deg, #f2d894 0%, #cba750 55%, #a8842f 100%);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 #ffffffa6,
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 2px 6px rgb(var(--gold-rgb) / .3);
}

.fr-count--mute {
  color: var(--stone-500);
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--stone-200);
}

.fr-empty {
  padding: 3.5rem 1.5rem;
}

.fr-empty__seal {
  color: var(--gold);
  border: 1px solid rgb(var(--gold-rgb) / .35);
  box-shadow: inset 0 1px 2px #ffffffe6,
    0 0 0 4px var(--bone),
    0 0 0 5px var(--stone-200),
    0 0 18px rgb(var(--gold-rgb) / .2);
}

.fr-empty p {
  margin: 0 auto 1.25rem;
  max-width: 24rem;
  line-height: 1.6;
}

.fr-more {
  display: block;
  width: 100%;
  padding: .75rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-top: 1px solid var(--stone-100);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-more:hover {
  color: var(--gold);
  background: var(--ivory);
}

[data-theme="dark"] .fr-fitem,
[data-theme="dark"] .fr-sub,
[data-theme="dark"] .fr-more {
  border-color: var(--stone-200);
}

[data-theme="dark"] .fr-fitem__ava {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--stone-300);
}

[data-theme="dark"] .fr-fitem__dot {
  box-shadow: 0 0 0 2px var(--bone), 0 0 8px rgb(var(--gold-rgb) / .6);
}

[data-theme="dark"] .fr-wntab:hover,
[data-theme="dark"] .fr-more:hover {
  background: var(--parchment);
}

[data-theme="dark"] .fr-fitem__meta > * + *:before {
  background: var(--stone-300);
}

[data-theme="dark"] .fr-empty__seal {
  background: radial-gradient(circle at 35% 28%, var(--ivory), var(--white));
}

@media (max-width: 64rem) {
  .fr-wnlayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .fr-fitem {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .75rem;
    padding: .8125rem 1rem;
  }
  .fr-fitem__ava {
    width: 2.25rem;
    height: 2.25rem;
  }
  .fr-fitem__side {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 3rem;
  }
  .fr-quick {
    opacity: 1;
  }
  .fr-fitem__num {
    min-width: 0;
    text-align: left;
  }
  .fr-fitem__num span {
    display: inline;
    margin-left: .25rem;
  }
  .fr-daysep {
    padding: .625rem 1rem;
  }
}

.fr-fitem__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}