@media (max-width: 700px) {
  body {
    overflow-x: hidden;
  }
  .topbar-inner {
    padding: 14px 16px;
  }
  .panel {
    padding: 18px;
  }
  .panel-inner {
    padding: 14px;
  }
  .panelHead {
    margin-bottom: 10px;
  }
  p {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .card {
    padding: 14px;
  }
  .skillDesc,
  .itemDesc,
  .panelHead p,
  .article p {
    font-size: 13.5px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-span-3,
  .grid-span-5,
  .grid-span-7,
  .grid-span-12 {
    grid-column: span 12 !important;
  }
  .modal {
    max-height: 88vh;
  }
  .story-popup {
    width: 92%;
  }
  .close {
    padding: 8px 10px;
  }
  .navShell {
    width: 200px;
  }
  .wrap {
    padding: 14px 10px 50px;
  }
}

@media (max-width: 500px) {
  .avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background-size: 160%;
  }
  .brand h1 {
    font-size: 14px;
  }
}

@media (max-width: 450px) {
  .topbar-inner {
    padding: 10px 10px;
    gap: 6px;
  }
  .langBtn {
    padding: 5px 6px;
    font-size: 10px;
  }
  .menuBtn {
    padding: 6px 8px;
    font-size: 14px;
  }
  .avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background-size: 150%;
  }
  .brand h1 {
    font-size: 13px;
  }
  .brand p {
    font-size: 10px;
  }
  .navShell {
    width: 100%;
    max-width: 260px;
  }
}

@media (max-width: 380px) {
  .topbar-inner {
    padding: 8px 8px;
    gap: 6px;
  }
  .brand {
    gap: 6px;
  }
  .avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background-size: 140%;
  }
  .brand h1 {
    font-size: 12px;
  }
  .brand p {
    font-size: 9px;
  }
  .langBtn {
    padding: 4px 5px;
    font-size: 9px;
  }
  .menuBtn {
    padding: 5px 6px;
    font-size: 13px;
  }
  .navShell {
    max-width: 220px;
  }
  .wrap {
    padding: 10px 6px 40px;
  }
  .panel {
    padding: 12px;
  }
  .panel-inner {
    padding: 10px;
  }
  .panelHead h3 {
    font-size: 14px;
  }
  .panelHead p {
    font-size: 12.5px;
  }
  .card {
    padding: 12px;
  }
  .skillDesc,
  .itemDesc,
  .panelHead p,
  .article p {
    font-size: 12.5px;
  }
  .search input {
    padding: 10px 12px;
  }
  .toolbar-fixed {
    min-width: 0;
  }
  .search {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .btn {
    padding: 9px 10px;
    font-size: 12px;
  }
  .story-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  .story-teaser {
    padding: 14px 10px;
    margin-top: 18px;
  }
  .story-teaser-line {
    font-size: 12px;
  }
  .story-popup-head {
    padding: 14px 16px 10px;
  }
  .story-popup-body {
    padding: 14px 16px;
  }
  .story-popup-text {
    font-size: 12px;
  }
  .story-popup-title {
    font-size: 13px;
  }
  .close {
    padding: 8px 10px;
    font-size: 13px;
  }
  .story-popup-close {
    font-size: 16px;
  }
  #comment-form input,
  #comment-form textarea {
    padding: 10px 12px;
    font-size: 13px;
  }
  .tag {
    font-size: 10px;
    padding: 5px 6px;
  }
  .toolRow {
    gap: 6px;
  }
  .linkbtn {
    padding: 10px;
  }
  .linkbtn strong {
    font-size: 12px;
  }
  .linkbtn span {
    font-size: 11px;
  }
}