@media(min-width:1600px) {
  .feed-layout {
    max-width:1190px;
    grid-template-columns:minmax(0,730px) 320px;
    gap:40px;
  }
  .app {
    --sidebar-full:270px;
  }
}

@media(max-width:1200px) {
  .app {
    --sidebar-full:220px;
  }
  .sidebar {
    --sidebar-pad:15px;
  }
  .brand {
    font-size:21px;
    padding-left:calc(var(--sidebar-pad) + 5px);
  }
  .feed-layout {
    padding:28px;
    gap:22px;
    grid-template-columns:minmax(0,1fr) 260px;
  }
  .feed-aside .welcome {
    padding:22px;
  }
  .date-label {
    display:none;
  }
  .member-sidebar {
    display:none;
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-container {
    padding:30px;
  }
  .topbar {
    padding:0 28px;
  }
  .auth-layout {
    gap:35px;
  }
}

@media(max-width:1000px) {
  .feed-aside {
    display:none;
  }
  .feed-layout {
    max-width:760px;
    display:block;
  }
  .app {
    --sidebar-full:205px;
  }
  .sidebar-community>a {
    font-size:13px;
  }
  .brand {
    font-size:19px;
    gap:8px;
  }
  .nav-item {
    font-size:13px;
  }
  .channel-sidebar {
    width:190px;
  }
  .server-rail {
    width:52px;
    padding:16px 6px;
  }
  .server-rail a {
    width:37px;
    height:37px;
  }
  .auth-layout {
    display:block;
    margin:20px auto;
    max-width:600px;
  }
  .auth-intro {
    display:none;
  }
  .stats-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .profile-header {
    flex-wrap:wrap;
  }
  .settings-layout {
    grid-template-columns:150px 1fr;
    gap:20px;
  }
}

@media(max-width:760px) {
  .sidebar {
    transform:translateX(-100%);
    width:var(--sidebar-full);
    box-shadow:10px 0 30px #0002;
  }
  .sidebar.open {
    transform:none;
  }
  .app .shell {
    margin-left:0;
  }
  .sidebar-top .sidebar-pin {
    display:none;
  }

  .sidebar-top {
    display:none;
  }

  .topbar-brand .brand-logo {
    height:36px;
    max-width:120px;
  }
  .topbar {
    height:65px;
    padding:0 16px;
    gap:10px;
  }
  .global-search input {
    font-size:13px;
  }
  .global-search kbd {
    display:none;
  }
  .global-search svg {
    width:16px;
  }
  .mobile-menu {
    display:inline-flex;
  }
  .feed-layout {
    padding:25px 18px;
  }
  .page-heading h1 {
    font-size:25px;
  }
  .eyebrow {
    font-size:13px;
    letter-spacing:1.3px;
  }
  .page-heading p {
    font-size:13px;
  }
  .stories {
    height:140px;
    gap:8px;
  }
  .story {
    padding:9px;
  }
  .story strong {
    left:9px;
  }
  .stories .story:last-child {
    display:none;
  }
  .composer {
    padding:15px;
  }
  .composer-input textarea {
    font-size:13px;
    padding:15px;
  }
  .composer-actions .quiet {
    font-size:13px;
  }
  .composer-actions .button-row {
    gap:4px;
  }
  .composer .primary {
    padding:9px 12px;
  }
  .post-image {
    height:260px;
  }
  .post-copy {
    font-size:16px;
    padding:15px 18px;
  }
  .post-header {
    padding:17px 18px 0;
  }
  .post-actions {
    gap:12px;
  }
  .page-container {
    padding:25px 18px;
  }
  .card-grid {
    grid-template-columns:1fr;
  }
  .inline-form {
    flex-wrap:wrap;
  }
  .inline-form label {
    min-width:200px;
  }
  .settings-layout {
    display:block;
  }
  .settings-nav {
    flex-direction:row;
    overflow-x:auto;
    margin-bottom:20px;
  }
  .settings-nav a {
    white-space:nowrap;
    padding:8px 12px;
    font-size:13px;
  }
  .padded {
    padding:20px;
  }
  .form-grid {
    grid-template-columns:1fr;
  }
  .profile-cover {
    height:160px;
    font-size:18px;
  }
  .profile-header {
    gap:15px;
    padding:20px;
  }
  .profile-header .avatar {
    width:60px;
    height:60px;
    font-size:20px;
  }
  .profile-header h1 {
    font-size:23px;
  }
  .profile-header>div {
    min-width:170px;
  }
  .job-card {
    flex-wrap:wrap;
    gap:15px;
    padding:20px;
  }
  .job-card .stack {
    flex-direction:row;
  }
  .company-logo {
    height:45px;
    width:45px;
    font-size:22px;
  }
  .job-card h2 {
    font-size:17px;
  }
  .person-row {
    flex-wrap:wrap;
  }
  .person-row select {
    width:140px;
    font-size:13px;
  }
  .person-row button {
    font-size:13px;
  }
  .auth-layout {
    padding:20px;
  }
  .auth-card {
    padding:24px;
  }
  .chat-layout {
    height:calc(100dvh - 65px);
    position:relative;
  }
  .server-rail,.channel-sidebar {
    display:none;
  }
  .channel-sidebar.drawer-open {
    display:flex;
    position:absolute;
    inset:0 auto 0 0;
    width:240px;
    z-index:15;
    box-shadow:5px 0 20px #0002;
  }
  .chat-header {
    padding:15px;
    height:70px;
  }
  .chat-header small {
    font-size:13px;
  }
  .chat-header h2 {
    font-size:14px;
  }
  .chat-header .button-row {
    gap:0;
  }
  .message-history {
    padding:20px 16px;
  }
  .message-composer {
    margin:10px 15px 18px;
  }
  .message-body p {
    font-size:13px;
  }
  .chat-welcome h1 {
    font-size:22px;
  }
  .stats-grid {
    gap:10px;
  }
  .stats-grid h2 {
    font-size:24px;
  }
  .notification-row {
    padding:18px;
    gap:12px;
  }
  .notification-row strong {
    font-size:13px;
  }
  footer {
    padding:20px;
  }
  .toast {
    width:calc(100% - 30px);
    font-size:13px;
    bottom:15px;
  }
  .modal {
    padding:24px;
  }
  .page-heading {
    flex-wrap:wrap;
  }
  .page-heading>button {
    font-size:13px;
  }
  .post-stats {
    font-size:13px;
    padding:12px 18px;
  }
  .feed-tabs>div {
    gap:22px;
  }
}

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

@media(max-width:1100px) {
  .thread-panel {
    width:240px;
  }
}

@media(max-width:760px) {
  .thread-panel {
    position:absolute;
    right:0;
    top:70px;
    bottom:100px;
    width:80%;
    box-shadow:-10px 0 25px #0002;
    z-index:10;
  }
  .channel-setting {
    flex-wrap:wrap;
  }
  .channel-setting input {
    min-width:160px;
  }
}